'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '../components/ui/Button.js';
export function NavBuilderField({ label, value = [], onChange, helpText }) {
    function addItem() {
        onChange([...value, { id: crypto.randomUUID(), label: 'New Item', url: '/', children: [] }]);
    }
    function removeItem(id) {
        onChange(value.filter((n) => n.id !== id));
    }
    function renderNode(node, depth) {
        return (_jsxs("div", { className: "rounded-md border border-[var(--border)] bg-[var(--card)] p-3", style: { marginLeft: depth * 24 }, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("svg", { className: "h-4 w-4 text-[var(--muted-foreground)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" }) }), _jsx("span", { className: "font-medium", children: node.label }), _jsx("span", { className: "text-xs text-[var(--muted-foreground)]", children: node.url })] }), _jsx("button", { type: "button", onClick: () => removeItem(node.id), className: "text-xs text-[var(--muted-foreground)] hover:text-[var(--destructive)]", children: "Remove" })] }), node.children.length > 0 && (_jsx("div", { className: "mt-2 space-y-2", children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
    }
    return (_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-sm font-medium", children: label }), _jsx("div", { className: "space-y-2", children: value.map((node) => renderNode(node, 0)) }), _jsx(Button, { variant: "secondary", size: "sm", onClick: addItem, className: "mt-2", children: "Add Nav Item" }), helpText && _jsx("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: helpText })] }));
}
//# sourceMappingURL=NavBuilderField.js.map