import { createFileRoute, useRouter } from "@tanstack/react-router";
import { Button } from "../components/ui/button";
import { Card, CardContent, CardHeader } from "../components/ui/card";
import { trackLstEvent } from "../lib/umami.utils";

export const Route = createFileRoute("/forbidden")({
	component: RouteComponent,
});

function RouteComponent() {
	const click = () => {
		trackLstEvent("forbidden_click", {
			module: "forbidden",
			action: "click",
			label: "redirect",
			page: window.location.pathname,
		});
		router.navigate({ to: "/", replace: true });
	};
	const router = useRouter();
	return (
		<div className="flex items-center justify-center bg-background text-foreground">
			<Card>
				<CardHeader>
					<p className="text-2xl">Oops, you shouldn't have done that</p>
				</CardHeader>
				<CardContent>
					<p className="mt-3 text-muted-foreground">
						Your have tried to go to a page that you are not authorized to be
						at.
					</p>
				</CardContent>
				<div className=" flex justify-center">
					<Button className="w-64" onClick={click}>
						Go Back
					</Button>
				</div>
			</Card>
		</div>
	);
}