Gallery 5

"use client";

import Image from "next/image";
import { useState } from "react";

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { GalleryViewerContent } from "../_types/gallery";
import { defaultGallery5Content } from "./data";

const surfaceClass: Record<Surface, string> = {
  default: "bg-background",
  muted: "bg-muted",
  primary: "bg-primary",
  secondary: "bg-secondary",
};

/** One large image with a column of thumbnails that swap it. */
export default function Gallery5({
  className,
  content = defaultGallery5Content,
  surface = "default",
}: {
  /** Use `pb-0` when a detail section sits directly below in the same band. */
  className?: string;
  content?: GalleryViewerContent;
  surface?: Surface;
}) {
  const [active, setActive] = useState(0);
  const { images, title } = content;
  const current = images[active] ?? images[0];

  if (!current) return null;

  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface], className)}>
      <div className="mx-auto grid max-w-7xl gap-4 px-5 sm:px-8 lg:grid-cols-12 lg:px-12">
        <div className="relative aspect-3/2 overflow-hidden rounded-lg lg:col-span-9">
          <Image
            alt={current.alt}
            className="object-cover"
            fill
            priority
            sizes="(min-width: 1024px) 75vw, 100vw"
            src={current.src}
          />
        </div>

        <div className="grid grid-cols-4 gap-4 lg:col-span-3 lg:grid-cols-1">
          {images.map((image, index) => (
            <button
              aria-current={index === active}
              aria-label={`Show view ${index + 1} of ${images.length} of ${title}`}
              className={cn(
                "relative aspect-4/3 cursor-pointer overflow-hidden rounded-md transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                index === active
                  ? "opacity-100"
                  : "opacity-55 hover:opacity-100",
              )}
              key={image.src}
              onClick={() => setActive(index)}
              type="button"
            >
              <Image
                alt=""
                className="object-cover"
                fill
                sizes="(min-width: 1024px) 20vw, 25vw"
                src={image.src}
              />
              {index === active && (
                <span className="pointer-events-none absolute inset-0 rounded-md border-2 border-secondary" />
              )}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}