'use client';

import Image from 'next/image'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DialogContent } from '@/components/ui/dialog'; import { Calendar, Eye, Heart, MapPin, MessageCircle, Share2, User, } from 'lucide-react'; import { NewsItem } from '@/types/news.type'; import { getBadgeColor } from './news-event-system'; import { CommentSection } from './comment-section'; import { StarRating } from './star-rating';

interface NewsModalProps { item: NewsItem; onLike: (id: string) => void; onRate?: (id: string, rating: number) => void; onComment?: (id: string, content: string) => void; }

export const NewsModal = ({ item, onLike, onRate, onComment, }: NewsModalProps) => { const handleAddComment = (content: string) => { onComment?.(item.id, content); };

return ( <DialogContent className='max-w-4xl max-h-[90vh] overflow-y-auto p-0'> <div className='relative'> {/* Header Image */} <div className='relative h-64 w-full'> <Image src={ typeof item.image === 'string' ? item.image : item.image?.fileUrl || '/placeholder.svg' } alt={item.title} fill className='object-cover' /> <div className='absolute top-4 left-4'> <Badge className={getBadgeColor(item.type)}> {item.type.toUpperCase()} </Badge> </div> </div>

    {/* Content */}
    <div className='p-6'>
      {/* Title and Meta */}
      <div className='mb-4'>
        <h1 className='text-2xl font-bold text-gray-800 mb-2'>
          {item.title}
        </h1>
        <div className='flex items-center gap-4 text-sm text-gray-600 mb-4'>
          <div className='flex items-center gap-1'>
            <User className='w-4 h-4' />
            <span>{item.instructor}</span>
          </div>
          <div className='flex items-center gap-1'>
            <Calendar className='w-4 h-4' />
            <span>{item.date}</span>
          </div>
          {item.location && (
            <div className='flex items-center gap-1'>
              <MapPin className='w-4 h-4' />
              <span>{item.location}</span>
            </div>
          )}
          <div className='flex items-center gap-1'>
            <Eye className='w-4 h-4' />
            <span>{item.views} lượt xem</span>
          </div>
        </div>
      </div>

      {/* Rating */}
      <div className='flex items-center gap-4 mb-4'>
        <div className='flex items-center gap-2'>
          <span className='text-sm font-medium'>Đánh giá của bạn:</span>
          <StarRating
            rating={item.userRating}
            onRate={(rating) => onRate?.(item.id, rating)}
          />
        </div>
        <div className='flex items-center gap-2'>
          <span className='text-sm text-gray-600'>
            Đánh giá trung bình:
          </span>
          <StarRating rating={item.rating} />
          <span className='text-sm text-gray-600'>({item.rating})</span>
        </div>
      </div>

      {/* Content */}
      <div className='prose max-w-none mb-6'>
        <p className='text-gray-700 leading-relaxed'>{item.content}</p>
      </div>

      {/* Action Buttons */}
      <div className='flex items-center gap-4 mb-6 pb-4 border-b'>
        <Button
          variant={item.isLiked ? 'default' : 'outline'}
          size='sm'
          onClick={() => onLike(item.id)}
          className={item.isLiked ? 'bg-red-500 hover:bg-red-600' : ''}
        >
          <Heart
            className={`w-4 h-4 mr-2 ${item.isLiked ? 'fill-current' : ''}`}
          />
          {item.likes} Thích
        </Button>
        <Button variant='outline' size='sm'>
          <MessageCircle className='w-4 h-4 mr-2' />
          {item.comments.length} Bình luận
        </Button>
        <Button variant='outline' size='sm'>
          <Share2 className='w-4 h-4 mr-2' />
          Chia sẻ
        </Button>
      </div>

      {/* Comments Section */}
      <CommentSection
        comments={item.comments}
        onAddComment={handleAddComment}
      />
    </div>
  </div>
</DialogContent>

); }; my modal look so ugly because it have scrollbar beside