import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";

function SelectBox({
  select,
  selectType,
  selectors,
  label,
  setFieldValue,
  setFieldTouched,
  error,
  helperText,
}) {
  const handleChange = (event) => {
    setFieldValue(selectType, event.target.value);
  };
  const handleBlur = () => {
    setFieldTouched(select, true);
  };
  return (
    <FormControl
      variant="outlined"
      margin="normal"
      fullWidth
      size="small"
      error={error}
    >
      <InputLabel id="language-label">{label}</InputLabel>
      <Select
        labelId="language-label"
        id={select}
        name={select}
        size="small"
        value={select}
        onChange={handleChange}
        label="Language"
        onBlur={handleBlur}
      >
        {selectors.map((selector) => (
          <MenuItem key={selector.id} value={selector.value}>
            {selector.name}
          </MenuItem>
        ))}
      </Select>
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>
  );
}

export default SelectBox;