import Cookies from "js-cookie";
import Link from "next/link";
import Router from "next/router";

import * as cookieNames from "../lib/cookieNames";

function Navbar(): JSX.Element {
  const isLoggedIn = !!Cookies.get(cookieNames.TOKEN);

  function handleLogout(event: Event): void {
    event.preventDefault();
    Cookies.remove(cookieNames.TOKEN);
    Router.reload();
  }

  return (
    <nav>
      <ul>
        <li>
          {isLoggedIn ? (
            <button onClick={handleLogout as any}>Logout</button>
          ) : (
            <Link href="/login" passHref>
              <button>Login</button>
            </Link>
          )}
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;