import { XCircle } from "lucide-react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { Button } from "~/components/ui/button";
import { useTranslation } from "~/providers/I18nProvider";

/**
 * Pagina di token non valido per reset password: /auth/password-reset/[token]
 */
const NonValidPasswordResetToken: NextPage = () => {
	const router = useRouter();
	const { t } = useTranslation();
	return (
		<div className="mx-auto my-5 flex h-full items-center justify-center">
			<div className="prose dark:prose-invert max-w-5xl">
				<div className="flex items-center gap-2 font-bold text-3xl text-red-500">
					<XCircle />
					<span>{t.pwReset.notvalid_title}</span>
				</div>
				<p>{t.pwReset.notvalid_desc}</p>
				<Button
					className="mt-5"
					data-umami-event="pw_reset_notvalid_cta_btn"
					onClick={async () => {
						await router.push("/auth/new-password-reset");
					}}
				>
					{t.pwReset.notvalid_cta}
				</Button>
			</div>
		</div>
	);
};

export default NonValidPasswordResetToken;
