import { Card, CardContent } from './Card';
import { cn } from '@/lib/utils';

interface SkeletonCardProps {
  className?: string;
  lines?: number;
}

export function SkeletonCard({ className, lines = 3 }: SkeletonCardProps) {
  return (
    <Card className={cn('animate-pulse', className)}>
      <CardContent className="p-6">
        <div className="space-y-4">
          {/* Titre */}
          <div className="h-4 bg-[var(--muted)] rounded mb-4"></div>

          {/* Valeur principale */}
          <div className="h-8 bg-[var(--muted)] rounded mb-2"></div>

          {/* Lignes supplémentaires */}
          {Array.from({ length: lines - 2 }).map((_, i) => (
            <div
              key={i}
              className={cn(
                'h-4 bg-[var(--muted)] rounded',
                i === lines - 3 ? 'w-2/3' : 'w-full'
              )}
            ></div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

interface SkeletonGridProps {
  count?: number;
  className?: string;
  lines?: number;
}

export function SkeletonGrid({
  count = 6,
  className,
  lines = 3,
}: SkeletonGridProps) {
  return (
    <div className={cn('grid grid-cols-1 lg:grid-cols-3 gap-6', className)}>
      {Array.from({ length: count }).map((_, i) => (
        <SkeletonCard key={i} lines={lines} />
      ))}
    </div>
  );
}
