'use client';
import { Box, FormControl, InputLabel, MenuItem, Select, SvgIcon } from "@mui/material"
import { useState } from "react";
import ArrowBottomD from "../icons/ArrowBottomD";
import SettingD from "../icons/SettingD";
import SortD from "../icons/SortD";

function SortList() {

    const [age, setAge] = useState('');

    const handleChange = (event) => {
        setAge(event.target.value);
    };

    return (
        <Select
            value={age}
            displayEmpty
            onChange={handleChange}
            className="!w-[305px] !bg-[#FFF]"
            renderValue={(value) => {
                return (
                    <Box sx={{ display: "flex", gap: 1 }}>
                        <SvgIcon color="primary">
                            <SortD />
                        </SvgIcon>
                        {value || 'مرتب سازی'}
                    </Box>
                );
            }}
            IconComponent={() => (
                <div className="mx-3">
                    <ArrowBottomD />
                </div>
            )}
            sx={{
                '& .MuiSelect-select ': {
                    paddingRight: '12px !important'
                },
                '& .MuiOutlinedInput-notchedOutline ': {
                    borderColor: '#EFEFEF !important'
                }
            }}
        >
            <MenuItem value='براساس امتیاز 1'>براساس امتیاز 1</MenuItem>
            <MenuItem value='براساس امتیاز 2'>براساس امتیاز 2</MenuItem>
            <MenuItem value='براساس امتیاز 3'>براساس امتیاز 3</MenuItem>
        </Select>
    )
}

export default SortList