import { Skeleton } from "@/components/atoms";

interface LoadingStatsProps {
  /** Number of stat cards to display */
  count?: number;
}

/**
 * Generic loading skeleton for stats/metrics cards.
 * Shows a grid of stat cards with icon and two value lines.
 */
export function LoadingStats({ count = 4 }: LoadingStatsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="bg-card text-card-foreground border border-border rounded-2xl p-6 shadow-md"
        >
          <div className="flex items-center">
            <Skeleton className="h-8 w-8 rounded-full" />
            <div className="ml-4 space-y-2 flex-1">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-6 w-12" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
