import { MenuItem, Select, SvgIcon } from "@mui/material";
import { useState } from "react";
import ArrowBottomD from "../../icons/ArrowBottomD";
import SortD from "../../icons/SortD";

const listSort = ["براساس امتیاز 1", "براساس امتیاز 2", "براساس امتیاز 3"];

function SelectSort() {
  const [age, setAge] = useState("");

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

  return (
    <Select
      value={age}
      displayEmpty
      onChange={handleChange}
      className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
      renderValue={(value) => {
        return (
          <div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
            <SvgIcon color="primary">
              <SortD />
            </SvgIcon>
            {value || "مرتب سازی"}
          </div>
        );
      }}
      IconComponent={() => (
        <div className="mx-3 min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px]">
          <ArrowBottomD />
        </div>
      )}
      sx={{
        "& .MuiSelect-select ": {
          paddingRight: "12px !important",
        },
        "& .MuiOutlinedInput-notchedOutline ": {
          borderColor: "#EFEFEF !important",
        },
      }}
    >
      {listSort.map((item, idx) => (
        <div key={idx} className="flex flex-col items-start w-full">
          <MenuItem value={item} className="!p-2 !mr-2 !w-[calc(100%_-_16px)]">
            {item}
          </MenuItem>
          {listSort.length > idx + 1 && (
            <span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
          )}
        </div>
      ))}
    </Select>
  );
}

export default SelectSort;
