import React from 'react';
import {
  Listbox,
  ListboxProps as OriginalListboxProps,
  TSelectOption
} from '@cloudflare/component-listbox';
import { Base, BaseProps } from './Base';

export type ListboxProps<ValueType> = Omit<
  BaseProps<OriginalListboxProps<ValueType>, ValueType>,
  'onChange'
> & { onChange?: (selectedItem: TSelectOption<ValueType>) => void };

export default function FormListbox<ValueType>(props: ListboxProps<ValueType>) {
  // @ts-ignore
  return <Base<Props<ValueType>, ValueType> Component={Listbox} {...props} />;
}