projeto-hit/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx

import React from "react";
import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style";

import { AuthContext } from "../../../context/Auth/AuthContext";
import UserItem from "./UserItem";

import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg";
import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg";
import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal";
import UserModal from "../../UserModal/UserModal";

const UserBtn = ({ user, img, modal, modalSet }) => {
  const [modalConfirm, setModalConfirm] = React.useState(false);
  const [modalUser, setModalUser] = React.useState(false);
  const { handleLogout } = React.useContext(AuthContext);

  const handleModal = () => {
    setModalConfirm(!modalConfirm);
  };
  const handleModalUser = (e)=>{
    e.preventDefault()
    setModalUser(!modalUser)
  }

  return (
    <>
      <UserBtnStyled onClick={modalSet}>
        <img src={img} alt={user ? user.name : null} width="24px" />
        Bem Vindo, {user ? user.name : null}
      </UserBtnStyled>
      <UserModalStyled modal={modal} onMouseLeave={modalSet}>
        <UserModalListStyled>
          <UserItem title="Perfil" icon={<Perfil />} onClick={handleModalUser} />
          <UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
        </UserModalListStyled>
      </UserModalStyled>
      <UserModal modal={modalUser} click={handleModalUser}/>
      <ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
        Deseja Sair do sistema?
      </ConfirmationModal>
    </>
  );
};

export default UserBtn;