'use client'

import ArrowDownP from "@/components/icons/ArrowDownP";
import { MenuItem, Select } from "@mui/material";

function Head() {

    const list = [
        { id: 1, text: 'سال 1402' },
        { id: 2, text: 'سال 1403' },
        { id: 3, text: 'سال 1404' },
        { id: 4, text: 'سال 1405' },
        { id: 5, text: 'سال 1406' },
        { id: 6, text: 'سال 1407' }
    ]

    return (
        <div className="flex items-center justify-start gap-[12px] p-[16px]">
            <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">میزان درآمد</p>
            <Select
                defaultValue={1}
                className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
                IconComponent={e => <ArrowDownP data={e} />}
                sx={{
                    '& .MuiSelect-select': {
                        padding: '8px 6px 8px 8px !important',
                    },
                    '&:hover': {
                        '& .MuiOutlinedInput-notchedOutline': {
                            border: '1px solid #D7D7D7 !important'
                        }
                    },
                    '& .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#D7D7D7 !important',
                        border: '1px solid #D7D7D7 !important'
                    }
                }}
            >
                {list.map((item, idx) => (
                    <MenuItem value={item.id} key={idx}>{item.text}</MenuItem>
                ))}
            </Select>
        </div>
    )
}

export default Head