"use client";

import Link from "next/link";
import AuthShell from "@/components/AuthShell";
import { AuthField } from "@/components/AuthFields";
import styles from "@/components/AuthShell.module.css";

export default function ForgotPasswordForm() {
  return (
    <AuthShell titleLine1="Forgot" titleLine2="Password">
      <form
        className={styles.form}
        autoComplete="off"
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <AuthField
          label="Phone Number"
          name="phone"
          type="tel"
          autoComplete="off"
        />
        <div className={styles.actions}>
          <Link href="/login" className={`outline-btn ${styles.secondaryBtn}`}>
            Return to login
          </Link>
          <button type="submit" className={`outline-btn ${styles.primaryBtn}`}>
            Send code
          </button>
        </div>
      </form>
    </AuthShell>
  );
}