import { jsxs as r, jsx as n } from "react/jsx-runtime";
import { useState as s, useCallback as c } from "react";
import h from "../../Command.js";
import { COMMAND_VARIANT as C } from "../../constants/index.js";
import { basicGroups as m } from "../constants/index.js";
const I = () => {
  const [d, a] = s(""), [e, t] = s(null), i = c(
    (l) => {
      a(l), l !== (e == null ? void 0 : e.label) && t(null);
    },
    [e]
  ), u = c((l) => {
    m.forEach((p) => {
      const o = p.items.find((f) => f.value === l);
      o && (t(o), a(o.label));
    });
  }, []);
  return /* @__PURE__ */ r("div", { className: "space-y-4 w-[400px]", children: [
    /* @__PURE__ */ n(
      h,
      {
        variant: C.SIMPLE,
        groups: m,
        value: d,
        onValueChange: i,
        onItemSelect: u,
        placeholder: "Type to search (controlled)..."
      }
    ),
    e && /* @__PURE__ */ r("div", { className: "p-3 bg-gray-100 rounded-md text-sm", children: [
      /* @__PURE__ */ n("strong", { children: "Selected:" }),
      " ",
      e.label,
      " (",
      e.value,
      ")"
    ] })
  ] });
};
export {
  I as default
};
//# sourceMappingURL=ControlledCommand.js.map
