'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Image } from 'lucide-react';
export function GalleryPreview({ data, variant = 'grid' }) {
    const images = data.images || [];
    const placeholders = images.length > 0 ? images : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }));
    const Thumbnail = ({ item, className = '' }) => (_jsx("div", { className: `bg-muted flex items-center justify-center overflow-hidden rounded-md ${className}`, children: item.src ? (_jsx("img", { src: item.src, alt: item.alt || '', className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 20, className: "text-muted-foreground" })) }));
    if (variant === 'masonry') {
        return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "columns-3 gap-3 space-y-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]' }, i))) }) }));
    }
    if (variant === 'carousel') {
        return (_jsx("div", { className: "border-border overflow-hidden rounded-md border p-4", children: _jsxs("div", { className: "flex gap-3 overflow-hidden", children: [placeholders.slice(0, 4).map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square min-w-[120px] flex-1" }, i))), placeholders.length > 4 && (_jsx("div", { className: "bg-muted flex min-w-[120px] flex-1 items-center justify-center rounded-md", children: _jsxs("span", { className: "text-muted-foreground text-sm", children: ["+", placeholders.length - 4] }) }))] }) }));
    }
    if (variant === 'lightbox') {
        return (_jsxs("div", { className: "border-border rounded-md border p-4", children: [_jsx("div", { className: "grid grid-cols-3 gap-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square" }, i))) }), _jsx("p", { className: "text-muted-foreground mt-2 text-center text-xs", children: "Click to open lightbox" })] }));
    }
    return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "grid grid-cols-3 gap-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square" }, i))) }) }));
}
//# sourceMappingURL=GalleryPreview.js.map