import { Suspense } from "react";
import { LoginPageShell } from "@/components/auth/login-form";
import { ResetPasswordForm } from "@/components/auth/reset-password-form";
import { YaltopiaFooter } from "@/components/layout/YaltopiaFooter";

function ResetPasswordFallback() {
  return <p className="text-sm text-muted-foreground">Loading…</p>;
}

export default function ResetPasswordPage() {
  return (
    <>
      <LoginPageShell
        title="Set new password"
        subtitle="Choose a strong password for your account"
      >
        <Suspense fallback={<ResetPasswordFallback />}>
          <ResetPasswordForm />
        </Suspense>
      </LoginPageShell>
      <div className="mx-auto -mt-4 mb-8 w-full max-w-md px-4">
        <YaltopiaFooter />
      </div>
    </>
  );
}