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

function SelectBox({
                       select,
                       selectType,
                       selectors,
                       label,
                       setFieldValue,
                       setFieldTouched,
                       error,
                       helperText,
                   }) {

    const selectId = String(select);
    const handleChange = (event) => {
        setFieldValue(selectType, event.target.value);
    };
    const handleBlur = () => {
        setFieldTouched(select, true);
    };
    return (
        <FormControl
            variant="outlined"
            margin="normal"
            fullWidth
            size="small"
            error={error}
            sx={{mt: 0}}
        >
            <InputLabel id="language-label">{label}</InputLabel>
            <Select
                labelId="language-label"
                id={selectId}
                name={selectId}
                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;
