Orbit Spotlight Image Gallery

"use client";

import * as React from "react";
import { RotateCcw } from "lucide-react";
import { OrbitSpotlightGallery } from "@/components/ui/orbit-spotlight-gallery";
import type { OrbitSpotlightItem } from "@/components/ui/orbit-spotlight-gallery";

export const ORBIT_DEMO_ITEMS: OrbitSpotlightItem[] = [
  { src: "https://cdn.21st.dev/assets/mirror/83/8327bac3ef5a685ef2b2cd64fa710061deb2f249f45665c3089f549b07064ce6.jpg", alt: "Layered black and white building balconies", title: "Between the lines", meta: "2026 · Architecture study", description: "A study of rhythm, repetition and the spaces in between." },
  { src: "https://cdn.21st.dev/assets/mirror/e8/e8eec2cf6dcd16fe26ee7122707db26752b9a928143abc64df74027dde794285.jpg", alt: "A winding road along a forested coastline", title: "A softer edge", meta: "2026 · Landscape study", description: "Following the quiet meeting of land and water." },
  { src: "https://cdn.21st.dev/assets/mirror/b1/b1b6a4cf0f7a3f3ae792e958a4c3aec8178c3e3579450454b26591a6e33a2bb2.jpg", alt: "Curved blue and white architecture against a clear sky", title: "Open to the sky", meta: "2026 · Form study", description: "Two sweeping curves frame a small piece of sky." },
  { src: "https://cdn.21st.dev/assets/mirror/54/54bb33f690b3f29b7c7addd6f7a32f0ec541503c7df9b65e41eebfb1fbf86703.jpg", alt: "Aerial view of rugged ochre mountain ridges", title: "Earth in folds", meta: "2026 · Aerial study", description: "Light finds its way across a landscape of folded contours." },
  { src: "https://cdn.21st.dev/assets/mirror/04/04a9c958e76ccec242b8c99bb1ed8972c7bf17aed9a238cd5e77479f5bd2e9f8.jpg", alt: "Angular white building with a glass facade", title: "Quiet geometry", meta: "2025 · Architecture study", description: "Clean planes and generous space, held in balance." },
  { src: "https://cdn.21st.dev/assets/mirror/6e/6e3dd7582fc90ec27d7a18951bfb9c209012a7d786e39f63ad541dd9e0fbe816.jpg", alt: "A mountain lake reflecting a soft evening sky", title: "After the light", meta: "2025 · Landscape study", description: "A still surface holds the last colors of the day." },
  { src: "https://cdn.21st.dev/assets/mirror/c2/c273b8a45f272cdc2db41bfbcb4319bb2bc178a0fe87e47515e4d392d063799d.jpg", alt: "Sculptural orange building walls under a blue sky", title: "Warm embrace", meta: "2025 · Form study", description: "An open curve brings warmth to a simple silhouette." },
  { src: "https://cdn.21st.dev/assets/mirror/c1/c1816fcaa56ae4e5a3b1604855261f760baef16279e1af5e8f7464ad5b2cc4ae.jpg", alt: "Small green islands in clear turquoise water", title: "Little worlds", meta: "2025 · Aerial study", description: "Islands, paths and the space that connects them." },
];

export default function OrbitSpotlightGalleryDemo({ autoplay = true }: { autoplay?: boolean }) {
  const [selected, setSelected] = React.useState(null as number | null);
  const [interacted, setInteracted] = React.useState(false);
  const [reduced, setReduced] = React.useState(false);
  const [replay, setReplay] = React.useState(0);
  React.useEffect(() => {
    const query = matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setReduced(query.matches);
    update(); query.addEventListener("change", update);
    return () => query.removeEventListener("change", update);
  }, []);
  React.useEffect(() => {
    if (!autoplay || interacted || reduced || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const timers = [
      setTimeout(() => setSelected(2), 2400),
      setTimeout(() => setSelected(3), 4000),
      setTimeout(() => setSelected(null), 6400),
    ];
    return () => timers.forEach(clearTimeout);
  }, [autoplay, interacted, reduced, replay]);

  return <main data-orbit-demo className="flex min-h-svh w-full items-center justify-center bg-background p-4 text-foreground">
    <div className="w-full max-w-[840px]">
      <header className="mb-3 flex h-7 items-center justify-between px-1">
        <h1 className="text-xs font-medium tracking-tight">Orbit spotlight</h1>
        <span className="rounded-full border border-border px-2.5 py-1 text-[10px] text-muted-foreground">Sample collection</span>
      </header>
      <div className="overflow-hidden rounded-3xl border border-border" onPointerDownCapture={() => setInteracted(true)} onKeyDownCapture={() => setInteracted(true)} onWheelCapture={() => setInteracted(true)}>
        <OrbitSpotlightGallery key={replay} items={ORBIT_DEMO_ITEMS} selected={selected} onSelectedChange={setSelected} title="Selected work" autoplay={autoplay} style={{ height: "min(560px, calc(100svh - 116px))" }} />
      </div>
      <footer className="mt-3 flex h-6 items-center justify-between gap-3 px-1 text-[10px] text-muted-foreground">
        <p>Eight sample studies in shape, space &amp; light.</p>
        <button type="button" data-replay onClick={() => { setSelected(null); setInteracted(false); setReplay(value => value + 1); }} className="flex shrink-0 items-center gap-1.5 rounded py-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><RotateCcw className="size-3" aria-hidden />Replay</button>
      </footer>
    </div>
  </main>;
}