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>
	);
};