import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ImageIcon, X } from 'lucide-react';
export function ImagePreview({ images }) {
    const [expandedIndex, setExpandedIndex] = useState(null);
    if (images.length === 0)
        return null;
    return (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: images.map((img, i) => {
            const src = `data:${img.mimeType};base64,${img.data}`;
            const isExpanded = expandedIndex === i;
            return (_jsx("div", { className: "relative", children: isExpanded ? (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => setExpandedIndex(null), className: "absolute top-1 right-1 z-10 p-0.5 rounded bg-black/60 text-white hover:bg-black/80 transition-colors", children: _jsx(X, { className: "h-3 w-3" }) }), _jsx("img", { src: src, alt: `Tool result image ${i + 1}`, className: "max-w-full max-h-[32rem] rounded-lg border border-border object-contain" })] })) : (_jsxs("button", { type: "button", onClick: () => setExpandedIndex(i), className: "group relative overflow-hidden rounded-lg border border-border hover:border-foreground/30 transition-colors", children: [_jsx("img", { src: src, alt: `Tool result image ${i + 1}`, className: "w-48 h-32 object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center", children: _jsx(ImageIcon, { className: "h-5 w-5 text-white opacity-0 group-hover:opacity-80 transition-opacity drop-shadow-lg" }) })] })) }, `img-${i}-${img.mimeType}`));
        }) }));
}
//# sourceMappingURL=ImagePreview.js.map