import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material' import { TranslatableField, translateError } from 'common/form/validation' import { useCountriesList } from 'common/hooks/countries' import { useField } from 'formik' import { useTranslation } from 'react-i18next' export default function SelectCountry({ name = 'countryId' }) { const { t } = useTranslation() const { data } = useCountriesList() const [field, meta] = useField(name) const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : '' return ( <FormControl fullWidth size="small" variant="outlined" error={Boolean(meta.error) && Boolean(meta.touched)}> <InputLabel>Държава</InputLabel> <Select fullWidth defaultValue="" label="Държава" {...field}> <MenuItem value="" disabled> Избери държава </MenuItem> {data?.map((country) => ( <MenuItem key={country.id} value={country.id}> {country.name} </MenuItem> ))} </Select> {helperText && <FormHelperText error>{helperText}</FormHelperText>} </FormControl> ) }