import { Media } from '@/types';
import { Badge } from '@/components/ui/badge';

interface OverviewTabProps {
  media: Media;
}

export default function OverviewTab({ media }: OverviewTabProps) {
  return (
    <>
      {/* Genre Tags */}
      <div className="flex flex-wrap gap-2 mb-6">
        {media.genres?.map(genre => (
          <Badge key={genre} variant="secondary" className="bg-muted/50 text-foreground hover:bg-muted/80 border border-border/50 px-3 py-1 font-bold text-sm">
            {genre}
          </Badge>
        ))}
      </div>

      {/* Description */}
      <div 
        className="text-foreground leading-relaxed mb-8 max-w-4xl prose prose-sm dark:prose-invert"
        dangerouslySetInnerHTML={{ __html: media.description || '' }}
      />
    </>
  );
}