"use client";

import Link from "next/link";
import { useCurrentUser, useLogout } from "@/hooks/use-auth";
import { useAuthContext } from "@/context/auth-context";

export function NavAuth() {
  const { token, isLoaded } = useAuthContext();
  const { data: user } = useCurrentUser();
  const { mutate: logout, isPending } = useLogout();

  if (!isLoaded) return null;

  if (!token) {
    return (
      <Link
        href="/login"
        className="rounded-md px-3 py-1.5 text-sm text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-100"
      >
        Sign in
      </Link>
    );
  }

  return (
    <div className="flex items-center gap-2">
      {user && (
        <span className="hidden text-xs text-zinc-500 sm:block">
          {user.email}
        </span>
      )}
      <button
        onClick={() => logout()}
        disabled={isPending}
        className="rounded-md px-3 py-1.5 text-sm text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-100 disabled:opacity-50"
      >
        Sign out
      </button>
    </div>
  );
}