// form
import { useFormContext, Controller } from 'react-hook-form';
// @mui
import { FormControl, FormHelperText, InputLabel, Select, SelectProps } from '@mui/material';

// ----------------------------------------------------------------------

interface IProps {
  name: string;
  id: string;
  children: any;
}

export default function RHFSelectV2({ name, id, children, ...other }: IProps & SelectProps) {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
        <FormControl fullWidth error={error !== undefined ? true : false}>
          <InputLabel id={`${id}-label`}>{other.label}</InputLabel>
          <Select {...field} labelId={`${id}-label`} id={id} fullWidth {...other}>
            {children}
          </Select>
          {error && <FormHelperText>{error.message}</FormHelperText>}
        </FormControl>
      )}
    />
  );
}
