Notes

import React, { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import logo from '../../Assets/Icon/QBELogo.svg';
import cart from '../../Assets/Icon/ShoppingCartLight.svg';
import user from '../../Assets/Icon/UserAccountCircleLight.svg';
import UserDropdown from '../../Pages/Modals/UserDropdown';
import CartPopUp from "../../Pages/Cart/CartPopUp";
import './Header.css';

const Header = ({ cartItems }) => {
const [isPopupOpen, setPopupOpen] = useState(false);
const [isUserDropdownOpen, setUserDropdownOpen] = useState(false);

const isAuthenticated = useIsAuthenticated();
const navigate = useNavigate();
const location = useLocation();
const currentPath = location.pathname;

const { instance } = useMsal();

const onClickLogout = async () => {
try {
await instance.logoutPopup();
handleCloseDropdown(); // Close the modal after logout
navigate("/");
} catch (error) {
console.error("Logout failed:", error);
}
};

const handleCartClick = () => setPopupOpen(true);
const handleClosePopup = () => setPopupOpen(false);

// Handle navigation and close dropdown
const handleNavigation = (path) => {
handleCloseDropdown();
navigate(path);
};

const handleCloseDropdown = () => setUserDropdownOpen(false);

return (
<>
{isAuthenticated && (
<>
<header className="header">
<div className="qbe-logo-container">
<div className="application-menu">
<button className="transparent-btn">
<img src={logo} alt="Company Logo" className="logo-img" />
</button>
</div>
<p
className="header-supportpage"
onClick={() => handleNavigation("SupportHomepage/")}
>
Help & Support
</p>
</div>
<div className="icon-container">
{currentPath !== "/aboutYourself" && (
<vr className="vr-line-dashboard-icons" />
)}
{currentPath !== "/aboutYourself" && (
<button
className="cart-container transparent-btn"
onClick={handleCartClick}
>
<img src={cart} alt="Cart" className="cart-img" />
<span className="cart-item-count">2</span>
</button>
)}
<vr className="vr-line-dashboard-icons" />

{/* User Icon with Hover Handlers */}
<div
className="user-icon-container"
onMouseEnter={() => setUserDropdownOpen(true)} // Open on hover
onMouseLeave={handleCloseDropdown} // Close on mouse leave
>
<button className="transparent-btn">
<img src={user} alt="User Icon" className="user-img" />
</button>

{/* UserDropdown Component */}
<UserDropdown
currentPath={currentPath}
isOpen={isUserDropdownOpen}
onClose={handleCloseDropdown}
onLogout={onClickLogout}
/>
</div>
</div>
</header>

<CartPopUp isOpen={isPopupOpen} onClose={handleClosePopup} />
</>
)}
{!isAuthenticated && null}
</>
);
};

export default Header;