"use client";
import { jsxs as m, jsx as r } from "react/jsx-runtime";
import { Label as p } from "../shared/label.js";
import { useSettings as u } from "../../hooks/use-settings.js";
import { Input as i } from "../shared/input.js";
import { Button as d } from "../shared/button.js";
import { BsTrash as h } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { l as c } from "../../../../../_virtual/lodash.js";
import { SettingsType as v } from "../../types/index.js";
const k = () => {
  const [e, n] = u(
    "customAttributes",
    v.ADVANCED
  );
  return /* @__PURE__ */ m("div", { children: [
    /* @__PURE__ */ r(p, { className: "mb-1.5 block", children: "Custom Attributes" }),
    e == null ? void 0 : e.map((o, a, s) => /* @__PURE__ */ m("div", { className: "mb-3 flex items-center gap-3", children: [
      /* @__PURE__ */ r(
        i,
        {
          placeholder: "Name",
          value: o.name,
          onChange: (t) => {
            const l = c.cloneDeep([...s]);
            l[a].name = t.target.value, n(l);
          }
        }
      ),
      /* @__PURE__ */ r(
        i,
        {
          placeholder: "Value",
          value: o.value,
          onChange: (t) => {
            const l = c.cloneDeep([...s]);
            l[a].value = t.target.value, n(l);
          }
        }
      ),
      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
        h,
        {
          onClick: () => {
            const t = [...e];
            t.splice(a, 1), n(t);
          },
          className: "hover:text-danger-500 cursor-pointer"
        }
      ) })
    ] }, a)),
    /* @__PURE__ */ r(
      d,
      {
        onClick: () => {
          const o = e ? [...e] : [];
          o.push({ name: "", value: "" }), n(o);
        },
        disabled: !!(e != null && e.length) && !(e != null && e.every((o) => o.name && o.value)),
        variant: "secondary",
        className: "w-full",
        children: "Add new"
      }
    )
  ] });
};
export {
  k as CustomAttributeControl
};
//# sourceMappingURL=custom-attributes.control.js.map
