import { BrandLockup } from "@/components/Placeholders";
import MenuList from "@/layouts/MenuList";
import { ProfileSummary } from "@/components/profile/ProfileSummary";
import { useLogout } from "@/hooks/useLogout";
import { usePortalProfileStore } from "@/stores/usePortalProfileStore";
import menuCloseIcon from "../../images/icons/menu-close.svg";

interface MobileMenuProps {
    isOpen: boolean;
    onClose: () => void;
}

const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
    const profile = usePortalProfileStore((state) => state.profile);
    const handleLogout = useLogout(onClose);

    return (
        <div
            className={isOpen ? "mobile-menu is-open" : "mobile-menu"}
            aria-hidden={!isOpen}
        >
            <div className="mobile-menu__backdrop" onClick={onClose} />

            <aside className="mobile-menu__panel" aria-label="Mobile menu">
                <div className="mobile-menu__brand d-flex align-items-center justify-content-between">
                    <BrandLockup />
                    <button
                        className="d-inline-flex align-items-center justify-content-center"
                        type="button"
                        onClick={onClose}
                        aria-label="Close menu"
                    >
                        <img src={menuCloseIcon} alt="" aria-hidden="true" />
                    </button>
                </div>

                <div className="mobile-menu__profile">
                    <ProfileSummary
                        onLogout={handleLogout}
                        profile={profile}
                        withLogout
                    />
                </div>

                <MenuList onNavigate={onClose} />
            </aside>
        </div>
    );
};

export default MobileMenu;