"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { getStatusColor, type Content } from "./types";

interface Props { contents: Content[]; }

export default function ContentTab({ contents }: Props) {
    return (
        <Card className="bg-slate-900/50 border-slate-800">
            <CardHeader><CardTitle>Contenido Generado</CardTitle></CardHeader>
            <CardContent>
                <ScrollArea className="h-96">
                    {contents.length === 0 ? (
                        <p className="text-slate-400 text-center py-8">No hay contenido generado</p>
                    ) : (
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {contents.map((c) => (
                                <div key={c.id} className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
                                    <div className="flex justify-between mb-2">
                                        <Badge className={getStatusColor(c.status)}>{c.status}</Badge>
                                        <Badge variant="outline">{c.type}</Badge>
                                    </div>
                                    <p className="font-medium line-clamp-2">{c.title}</p>
                                    <p className="text-xs text-slate-400 mt-1">{c.platform}</p>
                                </div>
                            ))}
                        </div>
                    )}
                </ScrollArea>
            </CardContent>
        </Card>
    );
}