import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../utils/cn.js';
function SingleRef({ value, background_color, on_delete }) {
    return (_jsxs("div", { className: "group/ref inline-flex items-center gap-1", children: [_jsx("div", { className: cn('cls_data_form_reference text-xs mt-0.5 italic', background_color
                    ? `${background_color} px-1.5 py-0.5 rounded`
                    : 'text-gray-400'), children: value }), on_delete && (_jsx("button", { type: "button", onClick: on_delete, className: "opacity-0 group-hover/ref:opacity-100 transition-opacity p-0.5 rounded hover:bg-destructive/10", title: "Remove reference", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted-foreground hover:text-destructive", children: [_jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), _jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })] }) }))] }));
}
export function DataFormReferenceValue({ value, background_color, entries, on_delete }) {
    if (entries && entries.length > 0) {
        return (_jsx("div", { className: "flex flex-col gap-0.5", children: entries.map((entry, i) => (entry.value ? (_jsx(SingleRef, { value: entry.value, background_color: entry.background_color, on_delete: on_delete ? () => on_delete(i) : undefined }, entry.id ?? i)) : null)) }));
    }
    if (!value)
        return null;
    return (_jsx(SingleRef, { value: value, background_color: background_color, on_delete: on_delete ? () => on_delete(0) : undefined }));
}
//# sourceMappingURL=data_form_reference_value.js.map