import { useState } from "react"

export default function Navbar({ role }) {
  const [openAdminMenu, setOpenAdminMenu] = useState(false)

  const isAdminLoggedIn = localStorage.getItem("adminLoggedIn") === "true"
  const userName = "User"
  const adminName = "Admin"

  return (
    <nav>
      <div>
        <span>LOGO</span>
      </div>

      <ul>
        {/* GUEST */}
        {role === "guest" && !isAdminLoggedIn && (
          <>
            <li>Login</li>
            <li>Signup</li>
          </>
        )}

        {/* USER */}
        {role === "user" && !isAdminLoggedIn && (
          <li>
            <span>{userName}</span>
            <ul>
              <li>My Courses</li>
              <li>Logout</li>
            </ul>
          </li>
        )}

        {/* ADMIN */}
        {isAdminLoggedIn && (
          <li className="admin-menu">
            <button
              className="admin-btn"
              onClick={() => setOpenAdminMenu(!openAdminMenu)}
            >
              {adminName}
            </button>

            {openAdminMenu && (
              <ul className="admin-dropdown">
                <li
                  onClick={() => {
                    localStorage.removeItem("adminLoggedIn")
                    window.location.href = "/admin/login"
                  }}
                >
                  Logout
                </li>

                <li className="disabled">Settings</li>
              </ul>
            )}
          </li>
        )}
      </ul>
    </nav>
  )
}
