import GuestLayout from '@/Layouts/GuestLayout';
import InputError from '@/Components/InputError';
import { Head, useForm } from '@inertiajs/react';
import { Button, TextInput } from 'flowbite-react';
import { useEffect, useRef } from 'react';

export default function ForgotPassword({ status }) {
    const { data, setData, post, processing, errors } = useForm({
        email: '',
    });
    const firstInputRef = useRef(null);
    useEffect(() => {
        firstInputRef.current.focus();
    }, []);
    const submit = (e) => {
        e.preventDefault();

        post(route('password.email'));
    };

    return (
        <GuestLayout>
            <Head title="Forgot Password" />
            <div className="mx-auto max-w-screen-xl sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg dark:bg-gray-800">
                <h3 className="text-3xl text-gray-800 dark:text-gray-300 mb-3">Forgot password</h3>
                <div className="mb-4 text-sm text-gray-600 dark:text-gray-300">
                    Forgot your password? No problem. Just let us know your email address and we will email you a password
                    reset link that will allow you to choose a new one.
                </div>

                {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}

                <form onSubmit={submit}>
                    <TextInput
                        id="email"
                        type="email"
                        name="email"
                        value={data.email}
                        className="mt-1 block w-full"
                        ref={firstInputRef}
                        onChange={(e) => setData('email', e.target.value)}
                    />

                    <InputError message={errors.email} className="mt-2" />

                    <div className="flex items-center justify-end mt-4">
                        <Button className="ms-4" type="submit" isProcessing={processing} disabled={processing}>
                            Email Password Reset Link
                        </Button>
                    </div>
                </form>
            </div>
        </GuestLayout>
    );
}
