import { Game } from '../../lib/types';
import { CoverAspect } from '../../hooks/useSettings';

import { GameCard } from './GameCard';

interface Props {
    games: Game[];
    aspect: CoverAspect;
    getThumbnail: (id: string) => string | null;
    onOpen: (game: Game) => void;
    onPrimary: (game: Game) => void;
    onCancelDownload: (game: Game) => void;
}

export const GameGrid = ({
    games,
    aspect,
    getThumbnail,
    onOpen,
    onPrimary,
    onCancelDownload,
}: Props) => (
    <div className="grid">
        {games.map(g => (
            <GameCard
                key={g.id}
                game={g}
                aspect={aspect}
                thumbnailUrl={getThumbnail(g.id)}
                onOpen={onOpen}
                onPrimary={onPrimary}
                onCancelDownload={onCancelDownload}
            />
        ))}
    </div>
);