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

export default function ResetPassword() {
  const form = useForm({ username: '', code: '', password: '', password_confirmation: '' });

  return (
    <main className="auth-page">
      <Head title="تنظیم رمز جدید">
        <meta name="description" content="تنظیم رمز عبور جدید برای حساب کاربری دانشیار من." />
      </Head>
      <section className="auth-card">
        <p className="eyebrow">بازیابی امن</p>
        <h1>تنظیم رمز عبور جدید</h1>
        <p>بعد از انتخاب SMS یا Email 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.code} onChange={(event) => form.setData('code', event.target.value)} />
          <TextInput label="رمز جدید" type="password" value={form.data.password} onChange={(event) => form.setData('password', event.target.value)} />
          <TextInput label="تکرار رمز جدید" type="password" value={form.data.password_confirmation} onChange={(event) => form.setData('password_confirmation', event.target.value)} />
          <button className="btn btn-primary full" type="button">ثبت رمز جدید</button>
        </form>
      </section>
    </main>
  );
}
