import { useState } from "react";
import { Button } from "@mui/material";
import ArrowBottomHD from "@/components/icons/ArrowBottomHD";
import Image from "next/image";
import DetailProfile from "@/app/component/DetailProfile";

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

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

  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>
      <DetailProfile anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
    </>
  );
}

export default MenuProfile;