// Icons
import ArrowBottomH from "@/components/icons/ArrowBottomH";
import Location from "@/components/icons/Location";
import { Button } from "@mui/material";

function ButtonFilter({ selected, setOpen }) {
  const handleOpen = () => setOpen(true);

  return (
    <div>
      <Button
        className="!border-none hover:!bg-transparent !shadow-none !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
        onClick={handleOpen}
        variant="contained"
        color="secondary"
      >
        <div className="min-w-[20px] min-h-[20px] hidden md:flex">
          <Location />
        </div>
        <p
          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
        >
          {(selected.city !== "نوبت 724" ? selected.city : false) || "شهر"}
        </p>
        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
          <ArrowBottomH />
        </div>
      </Button>
    </div>
  );
}

export default ButtonFilter;
