import { useState } from 'react';

export const RegistrationForm = ({ onRegistration }) => {
    const [login, setLogin] = useState("")
    const [password, setPassword] = useState("")
    const [passwordValidation, setPasswordValidation] = useState("")
    const validation = new RegExp(`^(?=.*[0-9]).{${4},}$`)

    return (
        <div className="reg-form">
            <span>password must be at least 4 characters long and contain a number </span>
            <input value={login} onChange={e => setLogin(e.target.value)} />
            <input type='password' value={password} onChange={e => setPassword(e.target.value)} />
            <input type='password' value={passwordValidation} onChange={e => setPasswordValidation(e.target.value)} />
            <button disabled={!(password === passwordValidation && validation.test(password))} onClick={() => onRegistration(login, password)}>Registration</button>
        </div>
    )
}