import Link from "next/link";
import { useAuth } from "react-oidc-context";
import { Source_Sans_3, Nunito } from "next/font/google";
const source = Source_Sans_3({
  subsets: ["latin"],
});
const font = source.className;
const btnStyle =
  "rounded-md px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700";

export default function NavigationBar() {
  const auth = useAuth();
  if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
    return (
      <nav className="absolute right-0 bottom-0 left-0 flex justify-center">
        <div
          className={`${font} flex flex-row items-center gap-6 rounded-tl-lg rounded-tr-lg border-2 border-b-0 border-black bg-sky-900 p-4 text-white`}
        >
          <Link className={btnStyle} href="/nominations">
            Nomineren
          </Link>
          <Link className={btnStyle} href="/lobby">
            Start spel (test)
          </Link>
          <Link className={btnStyle} href="/session">
            Session Connect
          </Link>
          <Link className={btnStyle} href="/mobile-voting">
            Mobile Voting
          </Link>
          <Link className={btnStyle} href="/post-game">
            Post Game
          </Link>
          <Link className={btnStyle} href="/users">
            Users
          </Link>
        </div>
      </nav>
    );
  }
}
