"use client";

import { useRouter } from "next/navigation";
import { AuthForm } from "@/features/auth/AuthForm";
import { authStrings } from "@/features/auth/strings";

// Ports ios/Mercury/Features/Auth/ForgotPasswordView.swift: back chevron,
// MERCURY wordmark, explanatory subtitle (rendered by AuthForm), the email
// field, and the "Сэргээх холбоос авах" CTA.
export default function ForgotPasswordPage() {
  const router = useRouter();

  return (
    <>
      <button
        type="button"
        onClick={() => router.back()}
        aria-label="Буцах"
        style={{
          background: "none",
          border: "none",
          alignSelf: "flex-start",
          marginTop: 24,
          fontSize: 20,
          cursor: "pointer",
        }}
      >
        ‹
      </button>

      <div style={{ height: 72 }} />

      <h1
        style={{
          textAlign: "center",
          fontWeight: 700,
          letterSpacing: 1,
          fontSize: 24,
        }}
      >
        {authStrings.wordmark}
      </h1>

      <div style={{ flex: 1, minHeight: 40 }} />

      <AuthForm mode="forgot" />

      <div style={{ paddingBottom: 60 }} />
    </>
  );
}