import React from 'react';

import {
	FlexboxGrid,
	Form,
	FormGroup,
	FormControl,
	// HelpBlock,
	Button,
} from 'rsuite';

const boxStyle = {
	maxWidth: 373,
	margin: '0 auto',
	borderRadius: 7,
	background: 'white',
	marginTop: '10vh',
	marginBottom: '10vh',
	padding: '1rem',
};

const h3Style = { margin: '1rem' };

export default function Login() {
	return (
		<FlexboxGrid justify='center' style={boxStyle}>
			<h3 style={h3Style}>Login</h3>
			<Form horizontal>
				<FormGroup>
					<FormControl
						name='email'
						type='email'
						placeholder='email'
					/>
				</FormGroup>
				<FormGroup>
					<FormControl
						name='password'
						type='password'
						placeholder='password'
					/>
					{/* <HelpBlock tooltip>
						Minimum password length is 8 characters
					</HelpBlock> */}
				</FormGroup>
				<FormGroup>
					<Button appearance='primary' block>
						Sign in
					</Button>
				</FormGroup>
				<Button appearance='link'>Forgot password?</Button>
			</Form>
		</FlexboxGrid>
	);
}