import React from 'react';

import {
	Container,
	Content,
	FlexboxGrid,
	Panel,
	Form,
	FormGroup,
	ControlLabel,
	FormControl,
	Button,
	ButtonToolbar,
} from 'rsuite';

function Login() {
	return (
		<Container>
			<Content>
				<FlexboxGrid justify='center'>
					<FlexboxGrid.Item>
						<Panel header={<h3>Login</h3>} bordered>
							<Form fluid>
								<FormGroup>
									<ControlLabel>
										Username or email address
									</ControlLabel>
									<FormControl name='name' />
								</FormGroup>
								<FormGroup>
									<ControlLabel>Password</ControlLabel>
									<FormControl
										name='password'
										type='password'
									/>
								</FormGroup>
								<FormGroup>
									<ButtonToolbar>
										<Button appearance='primary'>
											Sign in
										</Button>
										<Button appearance='link'>
											Forgot password?
										</Button>
									</ButtonToolbar>
								</FormGroup>
							</Form>
						</Panel>
					</FlexboxGrid.Item>
				</FlexboxGrid>
			</Content>
		</Container>
	);
}

export default Login;