import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { ProviderIcons } from "@/Components/Dashboard/integrationIcons";

/**
 * Wrapper de Card para tabelas das paginas de detalhamento (Google Ads,
 * Meta Ads, GA4). Exibe titulo + icone(s) da(s) integracao(oes) origem dos dados.
 */
export default function DrilldownTableCard({ title, icon: Icon, providers = [], children }) {
    return (
        <Card>
            <CardHeader className="pb-2 pt-4 px-4">
                <div className="flex items-center justify-between gap-2">
                    <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
                        {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
                        {title}
                    </CardTitle>
                    {providers?.length ? <ProviderIcons providers={providers} /> : null}
                </div>
            </CardHeader>
            <CardContent className="px-4 pb-4">
                {children}
            </CardContent>
        </Card>
    );
}