import { useState } from "react";
import { Button, Popover } from "@mui/material";
import ArrowBottomHD from "@/components/icons/ArrowBottomHD";
import ProfilePA from "@/components/icons/ProfilePA";
import LogoutP from "@/components/icons/LogoutP";
import SettingPA from "@/components/icons/SettingPA";
import CardDA from "@/components/icons/CardDA";
import Image from "next/image";

function MenuProfile({ data }) {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => setAnchorEl(event.currentTarget);
  const handleClose = () => setAnchorEl(null);

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <>
      <Image
        className="flex md:hidden w-[32px] h-[32px] rounded-full"
        src={data.src}
        alt="profile"
        height={32}
        width={32}
      />
      <Button
        variant="text"
        onClick={handleClick}
        className="!hidden md:!flex !items-start !justify-center !gap-[8px] !p-1"
      >
        <Image
          className="w-[48px] h-[48px] rounded-full"
          src={data.src}
          alt="profile"
          height={48}
          width={48}
        />
        <div className="flex flex-col items-start justify-between gap-[3px]">
          <p className="text-[#3B3B3B] dark:text-[#D7D8ED] text-[14px] font-semibold">
            دکتر {data.name}
          </p>
          <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal">
            {data.expertise}
          </p>
        </div>
        <div className="mr-[4px]">
          <ArrowBottomHD />
        </div>
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <div className="flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]">
          <Button
            fullWidth
            variant="text"
            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
          >
            <ProfilePA />
            پروفایل من
          </Button>
          <Button
            fullWidth
            variant="text"
            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
          >
            <CardDA />
            پرداخت ها
          </Button>
          <Button
            fullWidth
            variant="text"
            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
          >
            <SettingPA />
            تنظیمات
          </Button>
          <Button
            fullWidth
            color="error"
            variant="contained"
            onClick={handleClose}
            sx={{
              "&.MuiButtonBase-root": {
                paddingTop: "8px !important",
                paddingBottom: "8px !important",
              },
            }}
            className="!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]"
          >
            <LogoutP />
            خروج
          </Button>
        </div>
      </Popover>
    </>
  );
}

export default MenuProfile;