"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 dark:text-[#D7D8ED]">
        میزان درآمد
      </p>
      <Select
        defaultValue={1}
        className="!text-[#7E7E7E] dark:!text-[#A1A1A1] !text-[12px] !font-normal !rounded-[4px] dark:!bg-[#222433]"
        IconComponent={(e) => <ArrowDownP data={e} />}
        MenuProps={{
          PaperProps: {
            className: "dark:!bg-[#222433]",
          },
        }}
        sx={{
          "& .MuiSelect-select": {
            padding: "8px 6px 8px 8px !important",
          },
          "&:hover": {
            "& .MuiOutlinedInput-notchedOutline": {
              border: "1px solid #D7D7D7",
              "@media (prefers-color-scheme: dark)": {
                borderColor: "#343645 !important",
              },
            },
          },
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#D7D7D7 !important",
            border: "1px solid #D7D7D7",
            "@media (prefers-color-scheme: dark)": {
              borderColor: "#343645 !important",
            },
          },
        }}
      >
        {list.map((item, idx) => (
          <MenuItem
            value={item.id}
            key={idx}
            className="dark:!bg-[#222433] dark:!text-[#D7D8ED]"
          >
            {item.text}
          </MenuItem>
        ))}
      </Select>
    </div>
  );
}

export default Head;