'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Image } from 'lucide-react';
export function CardsPreview({ data, variant = 'grid-3' }) {
    const items = data.items || [];
    const placeholderItems = items.length > 0
        ? items
        : [
            { title: 'Card Title', description: 'Card description text' },
            { title: 'Card Title', description: 'Card description text' },
            { title: 'Card Title', description: 'Card description text' },
        ];
    const gridClass = variant === 'grid-2'
        ? 'grid grid-cols-2 gap-3'
        : variant === 'grid-4'
            ? 'grid grid-cols-4 gap-3'
            : variant === 'horizontal'
                ? 'flex gap-3 overflow-hidden'
                : 'grid grid-cols-3 gap-3';
    return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: gridClass, children: placeholderItems.map((item, i) => (_jsxs("div", { className: `border-border bg-card flex flex-col overflow-hidden rounded-md border ${variant === 'horizontal' ? 'min-w-40' : ''}`, children: [_jsx("div", { className: "bg-muted flex h-20 items-center justify-center", children: item.image ? (_jsx("img", { src: item.image, alt: item.title || '', className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 20, className: "text-muted-foreground" })) }), _jsxs("div", { className: "p-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: item.title || _jsx("span", { className: "text-muted-foreground", children: "Card Title" }) }), item.description && (_jsx("p", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: item.description }))] })] }, i))) }) }));
}
//# sourceMappingURL=CardsPreview.js.map