import { Card, CardFooter, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

/**
 * Skeleton fiel aos cards de métricas do dashboard (SectionCards)
 * Mantém o mesmo layout de 4 colunas responsivo
 */
export function SectionCardsSkeleton() {
	return (
		<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
			{Array.from({ length: 4 }).map((_, index) => (
				<Card key={index} className="@container/card gap-2">
					<CardHeader>
						<div className="space-y-3">
							{/* Título com ícone */}
							<div className="flex items-center gap-1">
								<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
								<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
							</div>

							{/* Valor principal */}
							<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />

							{/* Badge de tendência */}
							<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
						</div>
					</CardHeader>

					<CardFooter className="flex-col items-start gap-1.5 text-sm">
						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
						<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
					</CardFooter>
				</Card>
			))}
		</div>
	);
}