import { Images, Info } from "lucide-react";
import { Card, CardContent } from "@/Components/ui/card";
import {
    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
} from "@/Components/ui/tooltip";
import { ProviderIcons } from "@/Components/Dashboard/integrationIcons";
import SocialPostsTable from "./SocialPostsTable";

/**
 * Detalhamento de social orgânico: listagem de postagens do período.
 * Card único (não fatiado por dimensão). Drill-down detalhado de post fica
 * previsto para depois; por ora é uma tabela sortável/paginada server-side.
 */
export default function SocialPostsDrilldown({ projectId, startDate, endDate, provider = "instagram_social" }) {
    if (!projectId) return null;

    return (
        <Card>
            <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
                <span className="flex items-center gap-1.5 text-sm font-medium">
                    <Images className="h-3.5 w-3.5 text-muted-foreground" />
                    Postagens
                    <TooltipProvider delayDuration={150}>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <span className="inline-flex cursor-default text-muted-foreground">
                                    <Info className="h-3.5 w-3.5" />
                                </span>
                            </TooltipTrigger>
                            <TooltipContent side="top" className="max-w-xs">
                                Métricas de postagens são acumuladas (snapshot), não representam valores diários.
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                </span>
                <ProviderIcons providers={[provider]} />
            </div>
            <CardContent className="pt-4">
                <SocialPostsTable
                    projectId={projectId}
                    startDate={startDate}
                    endDate={endDate}
                    provider={provider}
                />
            </CardContent>
        </Card>
    );
}