import { jsxs as a, jsx as t } from "react/jsx-runtime";
import { useState as s, useCallback as m } from "react";
import d from "../../Command.js";
import { COMMAND_VARIANT as g } from "../../constants/index.js";
import { detailedGroups as u } from "../constants/index.js";
import l from "../../../box/Box.js";
const h = [
  {
    heading: "Search Fields",
    items: [
      { label: "ASIN", value: "asin" },
      { label: "GTIN", value: "gtin" },
      { label: "Product Name", value: "productName" },
      { label: "SKU", value: "sku" }
    ]
  },
  {
    heading: "Search Type",
    items: [
      { label: "Contains", value: "contains" },
      { label: "Starts with", value: "beginsWith" },
      { label: "Exact match", value: "exact" }
    ]
  }
], N = () => {
  const [e, n] = s(["gtin", "contains"]), c = {
    groups: h,
    onSelectionChange: (o, r) => {
      n(o), console.log("Search config selection changed:", o, "Input value:", r);
    },
    defaultSelectedItem: e
  }, i = m(
    (o) => {
      console.log("Selected item with config:", o, "Config:", e);
    },
    [e]
  );
  return /* @__PURE__ */ a(l, { className: "space-y-4 w-[400px]", children: [
    /* @__PURE__ */ t(
      d,
      {
        variant: g.SIMPLE,
        groups: u,
        searchConfig: c,
        placeholder: "Search with options...",
        onItemSelect: i
      }
    ),
    /* @__PURE__ */ a(l, { className: "p-3 bg-[var(--soft-bg-coral)] rounded-md text-sm", children: [
      /* @__PURE__ */ t("strong", { children: "Current search config:" }),
      " ",
      e.join(", ") || "None selected"
    ] })
  ] });
};
export {
  N as default
};
//# sourceMappingURL=SearchConfigCommand.js.map
