import { NavLink } from "react-router-dom";

const Header = () => {
  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user_id");
    window.location.href = "/";
  };

  const menuItems = [
    {
      label: "Dashboard",
      icon: "ri-dashboard-2-line",
      path: "/"
    },
    {
      label: "Project List",
      icon: "ri-profile-line",
      path: "/ProjectList"
    }
  ];

  const userMenu = [
    {
      label: "My Account",
      icon: "ri-user-fill",
      path: "/AccountInformation"
    }
  ];

  return (
    <div>
      <header id="page-topbar" className="bg-white">
        <div className="layout-width">
          <div className="navbar-header d-flex justify-content-between">
            <div className="d-flex align-items-center">

              <NavLink to="/" className="navbar-brand-box d-flex">
                <img
                  src="/assets/images/new_logo.png"
                  alt="Logo"
                  height={74}
                />
              </NavLink>

              <button
                type="button"
                className="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger"
              >
                <span className="hamburger-icon">
                  <span />
                  <span />
                  <span />
                </span>
              </button>
            </div>

            <div className="d-flex align-items-center">
              <div className="dropdown ms-sm-3 header-item topbar-user bg-light">
                <button
                  type="button"
                  className="btn"
                  id="page-header-user-dropdown"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <span className="d-flex align-items-center">
                    <img
                      className="rounded-circle header-profile-user"
                      src="/assets/Image.jpg"
                      alt="Header Avatar"
                    />
                    <span className="text-start ms-xl-2">
                      <span className="d-none d-xl-inline-block ms-1 fw-medium user-name-text">
                        Client
                      </span>
                      <span className="d-none d-xl-block ms-1 fs-12 user-name-sub-text">
                        Client Login
                      </span>
                    </span>
                  </span>
                </button>

                <div className="dropdown-menu dropdown-menu-end">
                  <h6 className="dropdown-header">Welcome Master Client!</h6>
                  <div className="dropdown-divider" />

                  <NavLink
                    className="dropdown-item"
                    to={"/AccountInformation"}
                  >
                    <i className={`ri-user-fill text-muted fs-16 align-middle me-1`} />
                    <span className="align-middle">My Account</span>
                  </NavLink>

                  <NavLink
                    className="dropdown-item"
                    to="/"
                    onClick={handleLogout}
                  >
                    <i className="mdi mdi-logout text-muted fs-16 align-middle me-1" />
                    <span className="align-middle">Logout</span>
                  </NavLink>
                </div>
              </div>
            </div>

          </div>
        </div>
      </header>

      {/* ========== SIDEBAR MENU ========== */}
      <div className="app-menu navbar-menu bg-light">
        <div className="navbar-brand-box text-center py-3">
          <img src="/assets/images/logo-sm.png" alt="Logo" height={22} />
        </div>

        <div id="scrollbar" className="container-fluid">
          <ul className="navbar-nav" id="navbar-nav">
            <li className="menu-title">Menu</li>

            {menuItems.map((item, i) => (
              <li className="nav-item" key={i}>
                <NavLink className="nav-link" to={item.path}>
                  <i className={item.icon} />
                  <span>{item.label}</span>
                </NavLink>
              </li>
            ))}
          </ul>
        </div>

        <div className="sidebar-background" />
      </div>

      <div className="vertical-overlay"></div>
    </div>
  );
};

export default Header;
