import React from 'react';
import { LoginFormular } from './login-formular';
import { RouteComponentProps } from '@reach/router';
import { useStyles } from './styles';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import { Typography } from '@material-ui/core';

export const Login: React.FC<RouteComponentProps> = () => {
  const classes = useStyles();
  return (
    <div className={classes.login}>
      <div className={classes.loginInnerWrapper}>
        <div className={classes.loginHeading}>
          <AccountCircleIcon className={classes.memberIcon} color="primary" />
          <Typography component="h1" variant="h5" color="primary">
            Přihlášení
          </Typography>
        </div>
        <div className={classes.loginFormular}>
          <LoginFormular />
        </div>
      </div>
    </div>
  );
};
