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";

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 max-w-5xl">
        <div className="flex items-center gap-2 text-3xl font-bold text-red-500">
          <XCircle />
          <span>{t.pwReset.notvalid_title}</span>
        </div>
        <p>{t.pwReset.notvalid_desc}</p>
        <Button
          className="mt-5"
          onClick={async () => {
            await router.push("/auth/new-password-reset");
          }}
        >
          {t.pwReset.notvalid_cta}
        </Button>
      </div>
    </div>
  );
};

export default NonValidPasswordResetToken;