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

type NavLogoutProps = { name: string };

const NavLogout = ({ name }: NavLogoutProps) => {
  const navigate = useNavigate();

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

  return (
    <button
      onClick={handleLogout}
      className="text-sm text-(--color-text-muted) transition-colors duration-200
        hover:text-(--color-primary)"
    >
      logout <span className="text-(--color-accent)">{name}</span>
    </button>
  );
};

export default NavLogout;