'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Image } from 'lucide-react';
export function ImagePreview({ data, variant = 'full-width' }) {
    const src = data.src;
    const alt = data.alt || '';
    const caption = data.caption || '';
    const aspectRatio = data.aspectRatio || '16/9';
    const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md';
    const ImagePlaceholder = ({ className = '' }) => (_jsx("div", { className: `bg-muted flex items-center justify-center ${roundedClass} ${className}`, style: { aspectRatio }, children: _jsx(Image, { size: 32, className: "text-muted-foreground" }) }));
    const ImageElement = ({ className = '' }) => src ? (_jsx("img", { src: src, alt: alt, className: `h-auto w-full object-cover ${roundedClass} ${className}`, style: { aspectRatio } })) : (_jsx(ImagePlaceholder, { className: className }));
    if (variant === 'side-by-side') {
        return (_jsxs("div", { className: "border-border grid grid-cols-2 gap-3 rounded-md border p-4", children: [_jsx(ImageElement, {}), _jsx(ImagePlaceholder, {})] }));
    }
    return (_jsxs("figure", { className: "border-border overflow-hidden rounded-md border p-4", children: [_jsx(ImageElement, {}), (variant === 'captioned' || caption) && (_jsx("figcaption", { className: "text-muted-foreground mt-2 text-center text-sm", children: caption || 'Image caption' }))] }));
}
//# sourceMappingURL=ImagePreview.js.map