import { ReactNode, useState } from 'react';
import { Combobox } from '@headlessui/react';

interface SelectorWrapperProps {
  multiple: boolean;
  children: ReactNode;
}

export function SelectorWrapper<T>({
  multiple,
  children,
}: SelectorWrapperProps) {
  const [selectedItems, setItems] = useState<T[]>([]);
  const [selectedItem, setItem] = useState('');

  function handleChangeItems(items: T[]) {
    setItems([...items]);
  }

  if (multiple) {
    return (
      <Combobox value={selectedItems} onChange={handleChangeItems} multiple>
        {children}
      </Combobox>
    );
  }

  return (
    <Combobox value={selectedItem} onChange={setItem}>
      {children}
    </Combobox>
  );
}

export default SelectorWrapper;