Gallery Masonry

/**
 * VibeBox Motion · Gallery Masonry
 * 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";

/*
 * Images at their own proportions in balanced columns (CSS columns, no script), so portraits and
 * landscapes sit together naturally. Placeholder scenes alternate tall and wide.
 */

const SCENE_RATIOS = ["4 / 5", "4 / 3", "1 / 1", "3 / 4", "16 / 10"];

export type GalleryMasonryProps = BlockProps<Content, Variant>;

export function GalleryMasonry({ content, variant = "three-up", id, tone, className }: GalleryMasonryProps) {
  return (
    <Section slug="gallery-masonry" 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={cn("columns-1 gap-4 sm:columns-2", variant === "three-up" && "lg:columns-3")}>
          {content.items.map((item, index) => {
            const scene = item.media.src.startsWith("scene:");
            const ratio = scene ? SCENE_RATIOS[index % SCENE_RATIOS.length] : `${item.media.width} / ${item.media.height}`;
            return (
              <li key={index} className={cn("mb-4 break-inside-avoid", REVEAL)}>
                <figure className="m-0 grid gap-2">
                  <div className="overflow-hidden rounded-xl ring-1 ring-border" style={{ aspectRatio: ratio }}>
                    <Media image={item.media} variant={index} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" />
                  </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 Masonry
 * 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 = ["three-up", "two-up"] as const;

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

export const content = sections.gallery;

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