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

function SelectBox({
                       select,
                       name,
                       selectors,
                       label,
                       handleChange,
                       error,
                       onBlur,
                       disabled,
                       helperText,
                       isLoading,
                       errorEcured,
                       variant
                   }) {
    const t = useTranslations();

    return (
        <FormControl
            disabled={disabled || false}
            variant={variant || "outlined"}
            margin="normal"
            fullWidth
            size="small"
            error={error}
            sx={{mt: 0}}
        >
            <InputLabel>{label}</InputLabel>
            <Select
                label={label}
                name={name}
                size="small"
                value={isLoading ? "" : select}
                onChange={handleChange}
                onBlur={onBlur}

            >
                {isLoading ? (
                    <MenuItem
                        sx={{color: "primary.main"}}>{t("LoanRequest.text_field_loading_provinces_list")}</MenuItem>
                ) : errorEcured ? (
                    <MenuItem sx={{color: "secondary.main"}}>
                        {t("LoanRequest.text_field_error_fetching_provinces")}
                    </MenuItem>
                ) : (
                    selectors.map((selector) => (
                        <MenuItem key={selector.id} value={selector.value}>
                            {selector.name}
                        </MenuItem>
                    ))
                )}
            </Select>
            <FormHelperText>{helperText}</FormHelperText>
        </FormControl>
    );
}

export default SelectBox;