import 'core-js/es/map';
import 'core-js/es/set';

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline, Container , Typography, Box, Link, Grid } from '@material-ui/core';
import theme from './theme';
import styles from './styles.css';
import BasicLayout from './basicLayout';

function Copyright() {
  return (
    <Typography variant="body2" align="center">
      Copyright © <i>xrysav29</i>, 2020.{' '}
      <Link color="primary" href="https://icons8.com/icons/set/puzzle" target="_blank" rel="noopener noreferrer">Puzzle</Link> icon by{' '}
      <Link color="primary" href="https://icons8.com" target="_blank" rel="noopener noreferrer">Icons8</Link>.{' '}
      Created with <Link color="primary" href="https://material-ui.com/" target="_blank" rel="noopener noreferrer">Material-UI</Link>.
    </Typography>
  );
}

function App() {
  return (
    <div>
      <Container maxWidth="lg" className='container'>
        <Box marginLeft={2} marginRight={2}>
          <Grid container className='rowGrid'>
            <Typography variant='h4' color='primary' gutterBottom align="center" className='title'>
              APPLICATION FOR CRYPTOGRAPHIC PROTOCOLS
            </Typography>
          </Grid>
          <Grid container className='columnGrid'>
            <BasicLayout />
            <Box marginTop={5}>
              <Copyright />
            </Box>
          </Grid>
        </Box>
      </Container>
    </div>
  );
}

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline classes={styles}/>
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);
