import React from 'react';

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

import TzDropdown from '../components/General/TimezonesCascader';

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

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

export default function Register() {
	return (
		<FlexboxGrid justify='center' style={boxStyle}>
			<h3 style={h3Style}>Register</h3>
			<Form horizontal>
				<FormGroup>
					<FormControl
						name='username'
						type='text'
						placeholder='username'
					/>
				</FormGroup>
				<FormGroup>
					<FormControl
						name='email'
						type='email'
						placeholder='email'
					/>
				</FormGroup>
				<FormGroup>
					<TzDropdown />
				</FormGroup>
				<FormGroup>
					<FormControl
						name='password'
						type='password'
						placeholder='password'
					/>
					<HelpBlock tooltip>
						Minimum password length is 8 characters
					</HelpBlock>
				</FormGroup>
				<FormGroup>
					<Button appearance='primary' block>
						Register
					</Button>
				</FormGroup>
			</Form>
		</FlexboxGrid>
	);
}