'use client'

import { signup } from '@/app/lib/actions'
import { useFormState, useFormStatus } from 'react-dom'

export default function Page() {
    const [errorMessage, dispatch] = useFormState(signup, undefined)

    console.log(errorMessage, '=== in client');
    return (
        <form action={dispatch}>
            <input name="username" required />
            <input type="password" name="password" placeholder='密码' required />
            <input type="password" name="confirm_password" placeholder='确认密码' required />
            <div>{errorMessage && <p>{errorMessage}</p>}</div>
            <LoginButton />
        </form>
    )
}

function LoginButton() {
    const { pending } = useFormStatus()

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        if (pending) {
            event.preventDefault()
        }
    }

    return (
        <button aria-disabled={pending} type="submit" onClick={handleClick}>
            Login {pending}
        </button>
    )
}