import React, {useState} from "react";
import "./LoginReg.css";

export const FormReg = ({FormReg}) => {
    const [login, setLogin] = useState('')
    const [password, setPassword] = useState('')
    const [passwordValid, setPasswordValid] = useState('')
    return (
        <div className='login'>
        <h3>Registration</h3>
        <input className='u'type ='login' placeholder='Username' value = {login} onChange = {e => setLogin(e.target.value)}/>
        <input className='p' type ='password' placeholder='Password' value = {password} onChange = {e => setPassword(e.target.value)} />
        <input className='p' type ='password' placeholder='RepeatYourPassword' value = {passwordValid} onChange = {e => setPasswordValid(e.target.value)} />
        <button type="submit" className='btn btn-primary btn-block btn-large' disabled = {!login || !password || (password !== passwordValid)} onClick = {() => FormReg(login, password)}>Remember me. </button>
        <button className='main_page'><a href = '/'>Main page</a></button>
        </div>
    )
}