"use client";

import { useEffect } from "react";
import ExploreDirectory from "./ExploreDirectory";
import type { ExploreKind } from "@/lib/api/explore";
import { useCmsStore, useHeritageStore, useNeighborhoodsStore, useVenuesStore } from "@/store/explore";

const PAGES = {
  heritage: { store: useHeritageStore, kind: "destination", noun: "places", cms: "history-heritage", title: "History & Heritage", lead: "Civilizations, citadels, mosques and souqs, by city." },
  arts: { store: useVenuesStore, kind: "cultural-venue", noun: "venues", cms: "arts-culture", title: "Arts & Culture", lead: "Theatres, museums and cultural centres, by city." },
  neighborhoods: { store: useNeighborhoodsStore, kind: "neighborhood", noun: "neighborhoods", cms: "neighborhoods", title: "Neighborhoods & Areas", lead: "Old quarters and districts worth walking, by city." },
} as const satisfies Record<string, { store: unknown; kind: ExploreKind; noun: string; cms: string; title: string; lead: string }>;

/** Header (copy from the CMS when it answers) plus a directory. One component for the three Explore list pages. */
export default function ExploreList({ page }: { page: keyof typeof PAGES }) {
  const p = PAGES[page];
  const { sections, load } = useCmsStore();
  useEffect(load, [load]);
  const cms = sections.find((s) => s.page_key === p.cms);

  return (
    <>
      <header className="lf-head">
        <div className="wrap">
          <span className="eyebrow">Explore Syria</span>
          <h1 className="lf-title">{p.title}</h1>
          <p className="lead">{cms?.body ?? p.lead}</p>
        </div>
      </header>
      <section className="wrap lf-body">
        <ExploreDirectory useStore={p.store} kind={p.kind} noun={p.noun} />
      </section>
    </>
  );
}