import { Link, useNavigate } from "@tanstack/react-router";
import { useSession, signOut } from "../../lib/auth-client";

const NavAuth = () => {
  const { data: session } = useSession();
  const navigate = useNavigate();

  const handleSignOut = () => {
    void signOut()
      .then(() => void navigate({ to: "/" }))
      .catch((err) => console.error("Sign out error:", err));
  };

  return (
    <div className="ml-auto">
      {session ? (
        <button
          onClick={handleSignOut}
          className="text-sm text-(--color-text-muted) transition-colors duration-200
            hover:text-(--color-primary)"
        >
          Sign out{" "}
          <span className="text-(--color-accent)">{session.user.name}</span>
        </button>
      ) : (
        <Link
          to="/login"
          className="text-sm font-medium px-4 py-1.5 rounded-full
            text-white bg-(--color-primary)
            hover:bg-(--color-primary-dark)
            transition-colors duration-200"
        >
          Sign in
        </Link>
      )}
    </div>
  );
};

export default NavAuth;