import type { KolaboraEvent } from "@/types/event";
import { ImageGallery, type GalleryItem } from "@/components/ui/image-gallery";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";

// `h-*` (fixed height, not min-h) — the chain of `height:100%` from
// ImageGallery's track down to each panel's <img> needs a definite height
// to resolve against; a min-height-only ancestor leaves that chain
// unresolved and browsers fall back to each image's own intrinsic height.
// Taller below md: mobile's gallery mode is a vertically-scrolling column
// (see image-gallery.module.css), so it needs more room to feel like an
// actual scroll surface than desktop's fixed horizontal-strip height does.
const PANEL_CLASS = "h-[70vh] md:h-105 overflow-hidden rounded-xl border border-kolabora-neutral-dark/10";

/**
 * "Dokumentasi Signature Event" — documents this event's own photos,
 * uploaded via Admin &gt; Events &gt; [event] &gt; Media &gt; Galeri
 * (`event_galleries`, `EventMediaController`), shown as an expanding hover
 * gallery. No `eventName`/`href` per item — `event_galleries` only stores
 * `image_path`/`order`, and every photo already belongs to this one event,
 * so there's nothing else to caption/link to.
 */
export function SignatureDocumentation({ event }: { event: KolaboraEvent }) {
  if (!event.galleries || event.galleries.length === 0) return null;

  const items: GalleryItem[] = event.galleries.map((image) => ({
    src: image.image_path,
    alt: `${event.title} documentation`,
  }));

  return (
    <QueueSection as="section" className="px-6 py-16">
      <div className="mx-auto w-full max-w-5xl">
        <QueueItem as="div">
          {/* font-sans (not font-heading) deliberately — this component
              renders inside the Signaturee page and must stay on Archivo
              even though --font-heading now points at Clash Display for
              Kolabora's own pages (see globals.css). */}
          <h2 className="font-sans text-2xl font-semibold text-kolabora-neutral-dark sm:text-3xl">
            Signature Event Documentation
          </h2>
          <p className="mt-3 font-sans text-kolabora-neutral-dark/70">
            See moments from Kolaborativ Official&apos;s featured event.
          </p>
        </QueueItem>

        {/* blur off: wraps a heavy photo panel (ImageGallery) — blurring
            that much raster content every frame is what stutters. */}
        <QueueItem as="div" blur={false} className="mt-6">
          <div className={PANEL_CLASS}>
            <ImageGallery items={items} className="h-full" />
          </div>
        </QueueItem>
      </div>
    </QueueSection>
  );
}