import { NestedSelect } from 'nested-select-react';

// Your hierarchical data
const categories = [
  {
    id: '1',
    name: 'Electronics',
    children: [
      {
        id: '1-1',
        name: 'Computers',
        children: [
          { id: '1-1-1', name: 'Laptops' },
          { id: '1-1-2', name: 'Desktops' }
        ]
      },
      { id: '1-2', name: 'Smartphones' }
    ]
  },
  {
    id: '2',
    name: 'Clothing',
    children: [
      { id: '2-1', name: 'Men' },
      { id: '2-2', name: 'Women' }
    ]
  }
];

function App() {
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleSelect = (category) => {
    setSelectedCategory(category);
    console.log('Selected:', category);
  };

  return (
    <div>
      <h1>Product Category</h1>
      <NestedSelect
        items={categories}
        selectedItemId={selectedCategory?.id}
        onSelect={handleSelect}
        placeholder="Select a category..."
      />
    </div>
  );
}