Gallery 6

"use client";

import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { GalleryCarouselContent } from "../_types/gallery";
import { defaultGallery6Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

const arrowClasses =
  "static size-12 translate-x-0 translate-y-0 border-input bg-background text-primary shadow-none before:shadow-none hover:bg-muted";

/** Captioned photographs in a looping carousel, arrows beside the header. */
export default function Gallery6({
  content = defaultGallery6Content,
  surface = "default",
}: {
  content?: GalleryCarouselContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <Carousel
        className="mx-auto flex max-w-7xl flex-col gap-10 px-5 sm:px-8 lg:px-12"
        opts={{ align: "start", loop: true }}
      >
        <SectionHeader
          action={
            <div className="flex items-center gap-2">
              <CarouselPrevious className={arrowClasses} variant="outline" />
              <CarouselNext className={arrowClasses} variant="outline" />
            </div>
          }
          description={content.description}
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        <CarouselContent className="-ml-4">
          {content.items.map((item) => (
            <CarouselItem
              className="basis-[88%] pl-4 sm:basis-1/2 lg:basis-[38%]"
              key={item.title}
            >
              <figure className="group">
                <div className="relative aspect-3/2 overflow-hidden rounded-lg">
                  <Image
                    alt={item.image.alt}
                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                    fill
                    sizes="(min-width: 1024px) 38vw, (min-width: 640px) 50vw, 88vw"
                    src={item.image.src}
                  />
                </div>
                <figcaption className="mt-4 flex items-start justify-between gap-4">
                  <div>
                    <p className="font-display text-primary text-xl">
                      {item.title}
                    </p>
                    <p className="mt-0.5 text-muted-foreground text-sm">
                      {item.description}
                    </p>
                  </div>
                  {item.href && (
                    <Link
                      aria-label={`View ${item.title}`}
                      className="mt-1 shrink-0 text-muted-foreground/70 transition-colors hover:text-primary"
                      href={item.href}
                    >
                      <ArrowUpRight className="size-5" />
                    </Link>
                  )}
                </figcaption>
              </figure>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </section>
  );
}