"use client";

import { useRouter } from "next/navigation";
import { Button, type ButtonProps } from "@mosaic/ui";
import { useAuth } from "@/lib/auth/auth-context";

interface LogoutButtonProps {
  variant?: ButtonProps["variant"];
  className?: string;
}

export function LogoutButton({
  variant = "secondary",
  className,
}: LogoutButtonProps): React.JSX.Element {
  const router = useRouter();
  const { signOut } = useAuth();

  const handleSignOut = async (): Promise<void> => {
    try {
      await signOut();
    } catch (error) {
      console.error("Sign out error:", error);
    } finally {
      router.push("/login");
    }
  };

  return (
    <Button variant={variant} onClick={handleSignOut} className={className}>
      Sign Out
    </Button>
  );
}