import React from 'react';
import styled from 'styled';

import { Layout, Main, Form } from '@grund/ui';

import { Header, Footer } from 'wapp/components';

import { fields } from './fields';

const Content = styled.Content`
	display: flex;
	flex-direction: row;
`;

const Section = styled.div`
	width: 50%;
`;

function onSubmit(values: any) {
	console.log('Submit form', { values });
}

export function StartScreen() {
	const formProps = { fields, onSubmit };

	return (
		<Layout>
			<Header />
			<Main>
				<Content>
					<Section>Start</Section>
					<Section>
						<Form {...formProps} />
					</Section>
				</Content>
			</Main>
			<Footer />
		</Layout>
	);
}
