import { Option, Select } from '@citric/core'
import { FieldComponent } from '../../form/types'

export const BooleanField: FieldComponent<boolean, Record<string, never>> = ({ name, onChange, value, disabled, onBlur }) => (
  <Select
    value={value === undefined ? '' : (value ? 'true' : 'false')}
    onChange={e => onChange(e.target.value === '' ? undefined : e.target.value === 'true')}
    name={name}
    disabled={disabled}
    onBlur={onBlur}
  >
    <Option value="true">True</Option>
    <Option value="false">False</Option>
  </Select>
)
