import { render } from "preact";
import styles from "./assets/game.module.css";
import type { Game } from "../../../build/isGame";

declare const GAMES: Game[];

function GameList({ games }: { games: Game[] }) {
    return (
        <div class={styles.games}>
            <h1 class={styles.title}>Games</h1>
            <div class={styles.grid}>
                {games.map((game) => (
                    <a key={game.name} href={`?game=${game.name}`} class={styles.card}>
                        {game.iconUrl
                            ? <img src={game.iconUrl} alt={game.name} class={styles.icon} />
                            : <span class={styles.placeholder}>{game.name[0].toUpperCase()}</span>}
                        <span class={styles.cardName}>{game.name}</span>
                    </a>
                ))}
            </div>
        </div>
    );
}

export default function run() {
    render(<GameList games={GAMES} />, document.body);
}