import { createFileRoute, useRouter } from "@tanstack/react-router";
import { useEffect } from "react";

import { signOutAndClearQueryCache } from "#/lib/auth-client";

export const Route = createFileRoute("/logout")({
	component: LogoutRoute,
});

function LogoutRoute() {
	const { queryClient } = Route.useRouteContext();
	const router = useRouter();

	useEffect(() => {
		void signOutAndClearQueryCache({
			queryClient,
			navigateToLogin: () => router.navigate({ to: "/login", replace: true }),
		});
	}, [queryClient, router]);

	return (
		<div className="p-6 text-sm text-muted-foreground">Signing out...</div>
	);
}