"use client";

import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Avatar from "@mui/material/Avatar";
import React from "react";
import { AppBarProps } from "./AppBar";
import Divider from "@mui/material/Divider";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import { signOut } from "next-auth/react";

type Props = Pick<AppBarProps, "avatarImageSrc" | "profileName">;

const Profile: React.FC<Props> = ({ avatarImageSrc, profileName }) => {
  const [profileMenuAnchorEl, setProfileMenuAnchorEl] =
    React.useState<HTMLButtonElement>();
  const openProfileMenu: React.MouseEventHandler<HTMLButtonElement> = (
    event,
  ) => {
    setProfileMenuAnchorEl(event.currentTarget);
  };
  const closeProfileMenu = () => {
    setProfileMenuAnchorEl(undefined);
  };

  const { t } = useTranslation("login");

  return (
    <>
      <IconButton aria-label="profile" onClick={openProfileMenu}>
        <Avatar src={avatarImageSrc} />
      </IconButton>
      <Menu
        id="profile-menu"
        anchorEl={profileMenuAnchorEl}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        keepMounted
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        open={Boolean(profileMenuAnchorEl)}
        onClose={closeProfileMenu}
        MenuListProps={{ dense: true, disablePadding: true }}
      >
        <Typography sx={{ mx: "1.5rem", my: "0.5rem" }} fontWeight="bold">
          {profileName}
        </Typography>
        <Divider />
        <MenuItem onClick={() => signOut()}>{t("Sign out")}</MenuItem>
      </Menu>
    </>
  );
};

export default Profile;