"use client";
import Link from "next/link";
import AppTypography from "@/components/ui/typography";
import { useTranslations } from "next-intl";
import ResetPasswordForm from "@/components/forms/reset-password-form";
import { useParams } from "next/navigation";

export default function ResetPasswordPage() {
  const t = useTranslations("ResetPasswordPage");
  const params = useParams();
  const resetCode = params?.id as string;

  return (
    <>
      <div className="w-full min-h-screen flex flex-col justify-center items-center">
        <div className="w-[500px] px-8 py-4 border border-gray-200 rounded-lg shadow">
          <AppTypography
            type="title"
            level={3}
            className="font-semibold text-center "
          >
            iDoc Shopify App
          </AppTypography>
          <AppTypography
            type="title"
            level={4}
            className="font-semibold text-center"
          >
            {t("title")}
          </AppTypography>

          <ResetPasswordForm resetCode={resetCode} />

          <div className="text-center font-normal text-md mt-2 text-[#3b82f6]">
            <Link href="/sign-in">{t("back_to_sign_in")}</Link>
          </div>
        </div>
      </div>
    </>
  );
}