import { stagger } from '@/lib/motion';
import { cn } from '@/lib/utils';
import { GameCard as Game } from '@/types/models';
import { motion } from 'framer-motion';
import GameCard, { CardVariant } from './GameCard';

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 default function GameGrid({ games, variant = 'grid', caption }: { games: Game[]; variant?: CardVariant; caption?: (g: Game) => string | undefined }) {
    return (
        <motion.div key={variant} variants={stagger} initial="hidden" animate="show" className={cn(LAYOUT[variant])}>
            {games.map((g) => <GameCard key={g.id} game={g} variant={variant} caption={caption?.(g)} />)}
        </motion.div>
    );
}