import { cn } from '@/lib/cn';

export function Skeleton({ className }: { className?: string }) {
  return <div className={cn('skeleton', className)} aria-hidden />;
}

export function SkeletonRows({ rows = 6, className }: { rows?: number; className?: string }) {
  return (
    <div className={cn('space-y-2', className)} aria-busy="true" aria-live="polite">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 py-2">
          <Skeleton className="h-3 w-14" />
          <Skeleton className="h-3 flex-1" />
          <Skeleton className="h-3 w-20" />
        </div>
      ))}
    </div>
  );
}

export function SkeletonTiles({ n = 4, className }: { n?: number; className?: string }) {
  return (
    <div className={cn('grid grid-cols-2 gap-6 md:grid-cols-4', className)} aria-busy="true">
      {Array.from({ length: n }).map((_, i) => (
        <div key={i} className="space-y-2 py-3">
          <Skeleton className="h-2.5 w-20" />
          <Skeleton className="h-7 w-24" />
          <Skeleton className="h-2.5 w-16" />
        </div>
      ))}
    </div>
  );
}