import { Head, Link, useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';

export default function Login() {
    const { data, setData, post, processing, errors } = useForm({ email: '', password: '', remember: false });
    function submit(event: FormEvent) {
        event.preventDefault();
        post('/login');
    }
    return (
        <>
            <Head title="Login" />
            <main className="min-h-screen bg-slate-50 px-4 py-10 text-slate-900">
                <form onSubmit={submit} className="mx-auto max-w-md rounded-lg border border-slate-200 bg-white p-5">
                    <h1 className="text-2xl font-semibold">Login</h1>
                    <div className="mt-5 grid gap-4">
                        <Field label="Email" error={errors.email}><input className="input" type="email" value={data.email} onChange={(event) => setData('email', event.target.value)} /></Field>
                        <Field label="Password" error={errors.password}><input className="input" type="password" value={data.password} onChange={(event) => setData('password', event.target.value)} /></Field>
                        <label className="flex items-center gap-2 text-sm font-medium"><input type="checkbox" checked={data.remember} onChange={(event) => setData('remember', event.target.checked)} /> Remember me</label>
                    </div>
                    <button disabled={processing} className="mt-5 w-full rounded-md bg-cyan-700 px-4 py-2 text-sm font-semibold text-white disabled:opacity-60">Login</button>
                    <p className="mt-4 text-center text-sm text-slate-600">No account? <Link href="/register" className="font-semibold text-cyan-700">Register</Link></p>
                </form>
            </main>
        </>
    );
}

function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
    return <label className="grid gap-1 text-sm font-medium text-slate-700"><span>{label}</span>{children}{error ? <span className="text-xs text-red-600">{error}</span> : null}</label>;
}
