import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { str } from './parts.js';
/** A responsive image grid with captions. */
export function GallerySection({ section }) {
    const c = section.content;
    const heading = str(c, 'heading');
    const columns = Number.parseInt(str(c, 'columns', '3'), 10) || 3;
    const images = Array.isArray(c.images) ? c.images : [];
    const withUrl = images.filter((img) => img && typeof img.url === 'string' && img.url);
    const cols = columns === 2
        ? 'sm:grid-cols-2'
        : columns === 4
            ? 'sm:grid-cols-2 lg:grid-cols-4'
            : 'sm:grid-cols-3';
    return (_jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [heading && (_jsx("h2", { className: "mb-6 text-2xl font-semibold tracking-tight text-zinc-900", children: heading })), withUrl.length > 0 ? (_jsx("div", { className: `grid grid-cols-1 gap-3 ${cols}`, children: withUrl.map((img, i) => (_jsxs("figure", { className: "overflow-hidden rounded-lg border border-zinc-200", children: [_jsx("img", { src: img.url, alt: img.alt ?? '', className: "aspect-square w-full object-cover" }), img.caption && (_jsx("figcaption", { className: "px-2 py-1.5 text-xs text-zinc-500", children: img.caption }))] }, i))) })) : (_jsx("div", { className: `grid grid-cols-1 gap-3 ${cols}`, children: Array.from({ length: columns }, (_, i) => (_jsx("div", { className: "aspect-square rounded-lg bg-zinc-100", "aria-hidden": true }, i))) }))] }));
}
//# sourceMappingURL=GallerySection.js.map