import Link from "next/link";
import MobileSidebar from "./mobile-sidebar";
import { useAuth } from "../../contexts/auth";

interface Auth{
  isAuthenticated: boolean;
}

const MobileMenu = () => {
  const { isAuthenticated} = useAuth() as Auth;


  return (
    // <!-- Main Header-->
    <header className="main-header main-header-mobile">
      <div className="auto-container">
        {/* <!-- Main box --> */}
        <div className="inner-box">
          <div className="nav-outer">
            <div className="logo-box">
              <div className="logo">
                <Link href="/">
                  <img src="/images/human_capital_logo.png" alt="brand" />
                </Link>
              </div>
            </div>
            {/* End .logo-box */}

            <MobileSidebar />
            {/* <!-- Main Menu End--> */}
          </div>
          {/* End .nav-outer */}

          <div className="outer-box">
            <div className="login-box">
              {/* <a
                href="#"
                className="call-modal"
                data-bs-toggle="modal"
                data-bs-target="#loginPopupModal"
              >
                <span className="icon icon-user"></span>
              </a> */}
              <div className="dropdown">
              <a
                className="dropdown-toggle show-on-mobile d-flex align-items-center"
                role="button"
                data-bs-toggle="dropdown"
                // aria-expanded="false"
              >
                
                
                <span className="">
                <span className="icon icon-user"></span>
                </span>
              </a>

              <ul className="dropdown-menu px-2">
                <li className="d-flex align-items-center gap-2 py-2">
                  <Link href={'/dashboard/profile'}>
                    <i className="la la-user-tie pe-2"></i>                  
                    My Profile
                  </Link>
                </li>
                
                {
                  !isAuthenticated ?

                  <li className="d-flex align-items-center gap-2 py-2">
                    <Link href={'/login'}>
                      <i className="la la-sign-out pe-2"></i>                  
                      Login/Register
                    </Link>
                  </li>
                  : 
                  <li className="d-flex align-items-center gap-2 py-2">
                    <Link href={'/logout'}>
                      <i className="la la-sign-out pe-2"></i>                  
                      Logout
                    </Link>
                  </li>
                   
                }
                
              </ul>
            </div>
            </div>
            {/* login popup end */}

            <a
              href="#"
              className="mobile-nav-toggler"
              data-bs-toggle="offcanvas"
              data-bs-target="#offcanvasMenu"
            >
              <span className="flaticon-menu-1"></span>
            </a>
            {/* right humberger menu */}
          </div>
        </div>
      </div>
    </header>
  );
};

export default MobileMenu;