import Link from "next/link";
import { auth, signOut } from "@/auth";
import { NavLinks } from "./nav-links";
import { SignOutButton } from "./sign-out-button";
import { Wordmark } from "./wordmark";

export async function Nav() {
  const session = await auth();

  const signOutAction = async () => {
    "use server";
    await signOut({ redirectTo: "/login" });
  };

  return (
    <header className="sticky top-0 z-50 border-b border-white/10 bg-surface/70 backdrop-blur-xl">
      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6">
        <Link href="/" className="flex items-center gap-2.5 text-lg font-bold text-fg">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/logo-bars.svg"
            alt="KNUR.APP"
            width={51}
            height={48}
            className="h-7 w-auto sm:h-8"
          />
          <Wordmark className="hidden text-2xl sm:block" />
        </Link>
        <nav className="flex items-center gap-1 sm:gap-2">
          <NavLinks />
          {session?.user?.name && (
            <span className="hidden px-2 text-xs text-fg/40 sm:inline">
              {session.user.name}
            </span>
          )}
          <SignOutButton action={signOutAction} />
        </nav>
      </div>
    </header>
  );
}