// Rôle : liste les jeux déclarés dans le contenu éditable.
export function GamesPage({ siteContent, games, gamesError }) {
  const content = siteContent.gamesPage;

  return (
    <>
      <section className="page-hero">
        <div>
          <p className="eyebrow">{content.eyebrow}</p>
          <h1>{content.title}</h1>
          <p>{content.description}</p>
        </div>
      </section>
      <section className="game-list">
        {games.length ? games.map((game) => (
          <article className="card game-card" key={game.id}>
            <a
              className="card-cover game-card-cover game-card-cover-link"
              href={`#/games/${game.id}`}
              aria-label={`Ouvrir ${game.title}`}
              title={`Ouvrir ${game.title}`}
              style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}
            >
              {game.images?.cardCover || game.image ? (
                <img src={game.images?.cardCover || game.image} alt={game.title} loading="lazy" />
              ) : (
                <span className="game-card-placeholder" aria-hidden="true">{game.title}</span>
              )}
            </a>
            <div className="card-body">
              <p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
              <h2>{game.title}</h2>
              <p>{game.summary}</p>
              <div className="card-actions">
                <a className="button primary" href={`#/games/${game.id}`}>Ouvrir</a>
              </div>
            </div>
          </article>
        )) : (
          <div className="empty">
            <h2>{content.emptyTitle}</h2>
            <p>{gamesError || content.emptyText}</p>
          </div>
        )}
      </section>
    </>
  );
}