import { Head, Link, useForm } from '@inertiajs/react';
import { TextInput } from '@/Components/Forms/TextInput';

export default function ForgotPassword() {
  const form = useForm({ username: '', mobile: '' });

  return (
    <main className="auth-page">
      <Head title="فراموشی رمز عبور">
        <meta name="description" content="درخواست بازیابی رمز عبور در دانشیار من." />
      </Head>
      <section className="auth-card">
        <p className="eyebrow">فراموشی رمز عبور</p>
        <h1>درخواست بازیابی رمز</h1>
        <p>فعلا مسیر آماده طراحی است؛ اتصال واقعی بعد از انتخاب provider پیامک یا ایمیل انجام می‌شود.</p>
        <form onSubmit={(event) => event.preventDefault()}>
          <TextInput label="نام کاربری" value={form.data.username} onChange={(event) => form.setData('username', event.target.value)} />
          <TextInput label="شماره موبایل ثبت‌شده" value={form.data.mobile} onChange={(event) => form.setData('mobile', event.target.value)} />
          <button className="btn btn-primary full" type="button">ارسال کد بازیابی</button>
          <Link className="btn btn-ghost full" href="/login">بازگشت به ورود</Link>
        </form>
      </section>
    </main>
  );
}
