import { SelectOption } from '@/src/interfaces/select'
import Select, { SingleValue } from 'react-select'

const genderOptions = [
  {
    value: 'Masculino',
    label: 'Masculino',
  },
  { value: 'Femenino', label: 'Femenino' },
]

interface Props {
  onChange: (value: any) => void
  value: string
}

export default function SelectGender({ onChange, value }: Props) {
  const handleChange = (option: SingleValue<SelectOption>) => {
    if (option) {
      onChange(option.value)
    }
  }

  return (
    <Select
      placeholder="Seleccione género"
      options={genderOptions}
      value={genderOptions.find(option => option.value === value)}
      onChange={handleChange}
      styles={{
        container: styles => ({
          ...styles,
          borderRadius: '0.5rem',
        }),
        control: styles => ({
          ...styles,
          padding: '2.5px',
          borderRadius: '0.5rem',
          backgroundColor: 'rgb(249 250 251 / var(--tw-bg-opacity))',
        }),
        multiValue: styles => ({
          ...styles,
          backgroundColor: '#c8cce0',
        }),
      }}
    />
  )
}