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

export default function OptionsMenu({options, onChangeOrder, orderedBy}) {
    return (
        <div className="w-full mx-3">
            <FormControl className={"w-40 shadow rounded-lg hover:ring-red-200"}>
                <Select
                    sx={{backgroundColor: 'white', height: '2.6rem', borderRadius: '8px', fontFamily: 'Vazirmatn', color: '#1e1e1e'}}
                    value={orderedBy}
                    defaultValue={'default'}
                    onChange={(e) => onChangeOrder(e)}
                    className="text-gray-500"
                >
                    <option className={''} value="default" disabled hidden>مرتب سازی</option>
                    {
                        options.map((option, index) => (
                            <MenuItem
                                divider={true}
                                sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}}
                                key={index}
                                value={option.value}
                            >
                                {option.name}
                            </MenuItem>
                        ))
                    }
                </Select>
            </FormControl>
        </div>
    );
}