Gallery Grid

/**
 * VibeBox Motion · Gallery Grid
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { Container, headingId, Media, REVEAL, Section, SectionHead, SlotText, type BlockProps } from "@/lib/vibebox/block-kit";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * Photos of the work or the place: an even grid of squares, or the first image as a wide banner
 * over the rest. Captions sit under each image and can wait as fill-ins.
 */

export type GalleryGridProps = BlockProps<Content, Variant>;

export function GalleryGrid({ content, variant = "uniform", id, tone, className }: GalleryGridProps) {
  const feature = variant === "feature";
  return (
    <Section slug="gallery-grid" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className="grid gap-[clamp(32px,4vw,56px)]">
        <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} />
        <ul className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-3">
          {content.items.map((item, index) => (
            <li key={index} className={cn("grid content-start gap-2", feature && index === 0 && "col-span-2 lg:col-span-3", REVEAL)}>
              <figure className="m-0 grid gap-2">
                <div className={cn("overflow-hidden rounded-xl ring-1 ring-border", feature && index === 0 ? "aspect-[16/9] lg:aspect-[21/8]" : "aspect-[4/3] sm:aspect-square")}>
                  <Media image={item.media} variant={index} sizes={feature && index === 0 ? "100vw" : "(min-width: 1024px) 33vw, 50vw"} />
                </div>
                <SlotText as="figcaption" value={item.caption} path={`items.${index}.caption`} className="text-small text-muted-foreground" />
              </figure>
            </li>
          ))}
        </ul>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Gallery Grid
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { sections, type z } from "@/lib/vibebox/content";

export const variants = ["uniform", "feature"] as const;

export type Variant = (typeof variants)[number];

export const content = sections.gallery;

export type Content = z.infer<typeof content>;