import type { NextPage } from "next";
import Head from "next/head";
import { LoadingPage } from "~/components/loading";
import { Status500 } from "~/components/status-page";
import { ChangePasswordForm } from "~/forms/FormChangePassword";
import { useTranslation } from "~/providers/I18nProvider";
import { useSession } from "~/providers/SessionProvider";

/**
 * Pagina di aggiornamento password: /auth/aggiorna-password
 */
const AggiornaPasswordPage: NextPage = () => {
	const { t } = useTranslation();
	const { status } = useSession();
	if (status === "LOADING") {
		return <LoadingPage />;
	}
	if (status !== "AUTHENTICATED") {
		window.location.reload();
		return <Status500 />;
	}
	return (
		<>
			<Head>
				<title>{t.heads.login_titolo}</title>
				<meta content={t.heads.login_description} name="description" />
			</Head>
			<main className="flex h-full w-full flex-col items-center justify-center px-4">
				<div className="w-full max-w-md py-28 text-gray-600 md:py-44">
					<ChangePasswordForm />
				</div>
			</main>
		</>
	);
};

export default AggiornaPasswordPage;
