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

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

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

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

export default SelectBox;