// Rôle : route vers les pages de jeux disponibles et leurs sous-pages.
import { GamesPage } from "./GamesPage.jsx";
import { Diablo4Page } from "./diablo4/Diablo4Page.jsx";
import { MhwildsPage } from "./mhwilds/MhwildsPage.jsx";

export function GameRoute(props) {
  const { gameId, games } = props;
  const game = games.find((item) => item.id === gameId);
  const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;

  if (!game) return <GamesPage {...props} />;
  if (game.id === "diablo4") return <Diablo4Page {...props} game={game} />;
  if (game.id === "mhwilds") return <MhwildsPage {...props} game={game} />;

  return (
    <>
      <section className="game-hero" style={heroStyle}>
        <div>
          <p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
          <h1>{game.title}</h1>
          <p>{game.summary}</p>
        </div>
      </section>
      <section className="info-grid">
        {game.sections.map((section) => (
          <article className="info-panel" key={section.title}>
            <h2>{section.title}</h2>
            <ul>{section.items.map((item) => <li key={item}>{item}</li>)}</ul>
          </article>
        ))}
      </section>
    </>
  );
}