import React from 'react';
import {
  Combobox,
  ComboboxProps as OriginalComboboxProps,
  TSelectOption
} from '@cloudflare/component-listbox';
import { Base, BaseProps } from './Base';

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

export default function FormCombobox<ValueType>(
  props: ComboboxProps<ValueType>
) {
  return (
    // @ts-ignore
    <Base<ComboboxProps<ValueType>, ValueType>
      Component={Combobox}
      {...props}
    />
  );
}