'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
function toSlug(text) {
    return text
        .toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_]+/g, '-')
        .replace(/^-+|-+$/g, '');
}
export function SlugField({ label, value = '', onChange, required, helpText }) {
    const [locked, setLocked] = useState(true);
    return (_jsxs("div", { children: [_jsxs("label", { className: "mb-1 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-0.5 text-[var(--destructive)]", children: "*" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex flex-1 items-center rounded-md border border-[var(--border)] bg-[var(--input-background)]", children: [_jsx("span", { className: "pl-3 text-sm text-[var(--muted-foreground)]", children: "/" }), _jsx("input", { type: "text", value: value, onChange: (e) => onChange(toSlug(e.target.value)), readOnly: locked, className: "flex-1 bg-transparent px-1 py-2 text-sm outline-none" })] }), _jsx("button", { type: "button", onClick: () => setLocked((l) => !l), className: "rounded-md border border-[var(--border)] p-2 text-sm hover:bg-[var(--accent)]", "aria-label": locked ? 'Unlock slug' : 'Lock slug', children: _jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: locked ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" })) }) })] }), value && (_jsxs("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: ["URL preview: /", value] })), helpText && _jsx("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: helpText })] }));
}
//# sourceMappingURL=SlugField.js.map