// Rôle : assemble le hero et les sous-pages Diablo IV.
import { Diablo4Listing } from "./Diablo4Listing.jsx";
import { Diablo4Overview } from "./Diablo4Overview.jsx";

export function Diablo4Page({ category, game, diablo4, filters, setFilters }) {
  const activeCategory = category === "affixes" ? category : "";
  const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;

  if (!diablo4.loaded) {
    return (
      <>
        <section className="game-hero" style={heroStyle}>
          <div>
            <p className="eyebrow">Diablo IV</p>
            <h1>Diablo IV</h1>
            <p>Chargement des affixes et filtres associés.</p>
          </div>
        </section>
        <section className="empty">
          <h2>Chargement</h2>
          <p>Préparation des données locales...</p>
        </section>
      </>
    );
  }

  if (diablo4.error) {
    return (
      <section className="empty">
        <h1>Impossible de charger Diablo IV</h1>
        <p>{diablo4.error}</p>
      </section>
    );
  }

  if (!activeCategory) return <Diablo4Overview game={game} />;

  return <Diablo4Listing game={game} diablo4={diablo4} filters={filters} setFilters={setFilters} />;
}
