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

export default function Register() {
    const { data, setData, post, processing, errors } = useForm({ name: '', email: '', password: '', password_confirmation: '' });
    function submit(event: FormEvent) {
        event.preventDefault();
        post('/register');
    }
    return (
        <>
            <Head title="Register" />
            <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">Register</h1>
                    <div className="mt-5 grid gap-4">
                        <Field label="Name" error={errors.name}><input className="input" value={data.name} onChange={(event) => setData('name', event.target.value)} /></Field>
                        <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>
                        <Field label="Confirm password" error={errors.password_confirmation}><input className="input" type="password" value={data.password_confirmation} onChange={(event) => setData('password_confirmation', event.target.value)} /></Field>
                    </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">Create account</button>
                    <p className="mt-4 text-center text-sm text-slate-600">Already registered? <Link href="/login" className="font-semibold text-cyan-700">Login</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>;
}
