import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import {useEffect, useState} from "react";
const names = [
    'Oliver Hansen',
    'Van Henry',
    'April Tucker',
    'Ralph Hubbard',
    'Omar Alexander',
    'Carlos Abbott',
    'Miriam Wagner',
    'Bradley Wilkerson',
    'Virginia Andrews',
    'Kelly Snyder',
];
const SelectBox = ({ formik, id, defaultValue }) => {

    useEffect(() => {
        formik.setFieldValue(id, defaultValue || '');
    }, []);

    const [selectedValue, setSelectedValue] = useState(defaultValue || '');

    const handleChange = (event) => {
        const { value } = event.target;
        setSelectedValue(value);
        formik.setFieldValue(id, value);
    };

    return (
        <>
            <FormControl sx={{ mt: 3 }}>
                <InputLabel>انتخاب</InputLabel>
                <Select
                    id={id}
                    value={selectedValue}
                    onChange={handleChange}
                    label="انتخاب"
                >
                    {names.map((name) => (
                        <MenuItem key={name} value={name}>
                            {name}
                        </MenuItem>
                    ))}
                </Select>
            </FormControl>
        </>
    );
};

export default SelectBox;