import { Skeleton } from '@/Components/ui/skeleton';
import { cn } from '@/lib/utils';
import { CardVariant } from './GameCard';

export function GameCardSkeleton({ variant = 'grid' }: { variant?: CardVariant }) {
    if (variant === 'list') {
        return (
            <div className="flex gap-4 rounded-xl border border-border p-3">
                <Skeleton className="aspect-[3/4] w-24 rounded-lg" />
                <div className="flex-1 space-y-2 py-1"><Skeleton className="h-5 w-1/2" /><Skeleton className="h-3 w-1/4" /><Skeleton className="h-3 w-full" /><Skeleton className="h-3 w-4/5" /></div>
            </div>
        );
    }
    if (variant === 'featured') return <Skeleton className="aspect-[16/10] rounded-2xl" />;
    return (
        <div className="overflow-hidden rounded-xl border border-border">
            <Skeleton className="aspect-[3/4] rounded-none" />
            <div className="space-y-2 p-3"><Skeleton className="h-4 w-3/4" /><Skeleton className="h-3 w-1/2" /></div>
        </div>
    );
}

const LAYOUT: Record<CardVariant, string> = {
    grid: 'grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5',
    list: 'flex flex-col gap-3',
    featured: 'grid gap-4 md:grid-cols-2 xl:grid-cols-3',
};

export function GameGridSkeleton({ count = 10, variant = 'grid' }: { count?: number; variant?: CardVariant }) {
    return (
        <div className={cn(LAYOUT[variant])} role="status" aria-label="Loading games">
            {Array.from({ length: count }, (_, i) => <GameCardSkeleton key={i} variant={variant} />)}
        </div>
    );
}