import Link from "next/link";

function Header({ user, loading }) {
  return (
    <header className="container mx-auto flex justify-center flex-col">
      <h1 className="text-4xl mx-auto">forget me not</h1>

      <nav className="mx-auto mt-2">
        <ul className="flex justify-center flex-row">
          <li className="mx-3">
            <Link href="/">
              <a>Home</a>
            </Link>
          </li>
          <li className="mx-3">
            <Link href="/about">
              <a>About</a>
            </Link>
          </li>
          {!loading &&
            (user ? (
              <>
                <li className="mx-3">
                  <Link href="/profile">
                    <a>Client-rendered profile</a>
                  </Link>
                </li>
                <li className="mx-3">
                  <Link href="/advanced/ssr-profile">
                    <a>Server rendered profile (advanced)</a>
                  </Link>
                </li>
                <li className="mx-3">
                  <a href="/api/v1/logout">Logout</a>
                </li>
              </>
            ) : (
              <li className="mx-3">
                <a href="/api/v1/login">Login</a>
              </li>
            ))}
        </ul>
      </nav>
    </header>
  );
}

export default Header;