import { FC, useContext } from "react";
import { UserContext } from "../context/UserContext";
import Link from "next/link";
import { useRouter } from "next/router";

const Nav: FC = () => {
  const context = useContext(UserContext);
  const { pathname } = useRouter();
  return (
    <header className="bg-prisma-50 w-full min-h-nav flex items-end">
      <nav className="w-full max-w-screen-lg flex mx-auto justify-between">
        <ul className="flex">
          <li className="">
            <Link href="/">
              <a className="py-7 px-4 block font-bold">Prisma</a>
            </Link>
          </li>
        </ul>
        <ul className="flex">
          {context.user ? (
            <li>
              <span className="py-7 px-4 block">
                Hello <b>{context.user.name}</b>
              </span>
            </li>
          ) : (
            <>
              <li>
                <Link href="/signup">
                  <a
                    className={`py-7 px-4 block ${
                      pathname === "/signup" ? "font-bold" : ""
                    }`}
                  >
                    Sign up
                  </a>
                </Link>
              </li>
              <li className="">
                <Link href="/login">
                  <a
                    className={`py-7 px-4 block ${
                      pathname === "/login" ? "font-bold" : ""
                    }`}
                  >
                    Log in
                  </a>
                </Link>
              </li>
            </>
          )}
        </ul>
      </nav>
    </header>
  );
};

export default Nav;