import { jsxs as o, jsx as l } from "react/jsx-runtime";
import { useState as n, useCallback as u } from "react";
import d from "../../Command.js";
import { detailedGroups as m } from "../constants/index.js";
import s from "../../../box/Box.js";
const p = [
  {
    label: "ASIN",
    value: "asin"
  },
  {
    label: "GTIN",
    value: "gtin"
  },
  {
    label: "Product Name",
    value: "productName"
  },
  {
    label: "SKU",
    value: "sku"
  }
], N = () => {
  const [e, a] = n("gtin"), [c, r] = n("gtin"), i = u(
    (t) => {
      a(t), console.log("Selected item with config:", t, "Config:", e);
    },
    [e]
  );
  return /* @__PURE__ */ o(s, { className: "space-y-4 w-[400px]", children: [
    /* @__PURE__ */ l(d, { groups: m, placeholder: "Search with options...", onItemSelect: i, selectionConfig: {
      enabled: !0,
      options: p,
      value: c,
      onSelect: r
    } }),
    /* @__PURE__ */ o(s, { className: "p-3 bg-[var(--soft-bg-coral)] rounded-md text-sm", children: [
      /* @__PURE__ */ l("strong", { children: "Current selection:" }),
      " ",
      e || "None selected"
    ] })
  ] });
};
export {
  N as default
};
//# sourceMappingURL=SelectionCommand.js.map
