import { detailedGroups as e } from "../constants/index.js";
import { P as t } from "../../../../packageName-CJwD6mUt.js";
import o from "../utils/stringifyCommandGroup.js";
const c = `import {
  Box, 
  Command, 
  COMMAND_VARIANT, 
  CommandItem, 
  CommandGroup, 
  SelectionConfigHandler, 
  SelectItem 
} from '${t}';
import React, { useCallback, useState } from 'react';

interface ISelectionCommandProps {}

const selectionOptions: SelectItem[] = [
  {
    label: 'ASIN',
    value: 'asin',
  },
  {
    label: 'GTIN',
    value: 'gtin',
  },
  {
    label: 'Product Name',
    value: 'productName',
  },
  {
    label: 'SKU',
    value: 'sku',
  },
];

const detailedGroups: CommandGroup[] = ${o(e)};

const SelectionCommand: React.FC<ISelectionCommandProps> = () => {
  const [selectedValue, setSelectedValue] = useState<string>('gtin');

  const handleItemSelect = useCallback(
    (item: CommandItem) => {
      setSelectedValue(item.value);
      console.log('Selected item with config:', item, 'Config:', selectedValue);
    },
    [selectedValue],
  );

  const selectionConfig: SelectionConfigHandler = {
    enabled: true,
    options: selectionOptions,
    value: selectedValue,
    onSelect: setSelectedValue,
  };

  return (
    <Box className="space-y-4 w-[300px]">
      <Command
        variant={COMMAND_VARIANT.SIMPLE}
        groups={detailedGroups}
        placeholder="Search with options..."
        onItemSelect={handleItemSelect}
        selectionConfig={selectionConfig}
      />
      <Box className="p-3 bg-[var(--soft-bg-coral)] rounded-md text-sm">
        <strong>Current selection:</strong> {selectedValue || 'None selected'}
      </Box>
    </Box>
  );
};

export default SelectionCommand;`;
export {
  c as default
};
//# sourceMappingURL=selectionCommandSource.js.map
