import { useState } from "react";

import "./LoginReg.css";

export const LoginForm = ({ onLogin }) => {
	const [login, setLogin] = useState("");
	const [password, setPassword] = useState("");
	return (
		<div className='login'>
			<h3>Login</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)}
			/>
			<button
				type='submit'
				className='btn btn-primary btn-block btn-large'
				disabled={!login || !password}
				onClick={() => onLogin(login, password)}
			>
				Let me in.{" "}
			</button>
			<button className='main_page'>
				<a href='/'>Main page</a>
			</button>
		</div>
	);
};