import * as React from "react";
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import theme from "../../theme";


const Authorization: React.FC = () =>  {
  return (
    <React.Fragment>

      <Box sx={{
        backgroundColor: theme.palette.primary.main,
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center"
      }}>
        <Box sx={{
          width: "350px",
          height: "700px",
          color: theme.palette.secondary.main,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center"
        }}>

          <Box sx={{
            display: "flex"
          }}>
            <Typography 
              variant="subtitle1" 
              sx={{ 
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center"
            }}>
              PENA
            </Typography>
            <Typography 
              variant = "subtitle2"
              sx = {{
                color: theme.palette.primary.main,
                backgroundColor: theme.palette.info.dark,
                borderRadius: "5px",
                margin: theme.spacing(0.5)
              }}
            >
              HUB
            </Typography>
          </Box>

          <Box sx={{
            width: "100%",
            height: "100px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <Box>
              <Typography variant="h6">
                Все пользователи
              </Typography>
            </Box>

            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.primary.light,
                width: "100%",
                height: "62px",
                "&:hover": {
                  backgroundColor: theme.palette.primary.dark
                }
              }}>
                ВОЙТИ
            </Button>
          </Box>

          <Box sx={{
            width: "100%",
            height: "100px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <Box>
              <Typography variant="h6">
                Общая статистика
              </Typography>
            </Box>

            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.primary.light,
                width: "100%",
                height: "62px",
                "&:hover": {
                  backgroundColor: theme.palette.primary.dark
                }
              }}>
                ВОЙТИ
            </Button>
          </Box>

          <Box sx={{
            width: "100%",
            height: "100px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <Box>
              <Typography variant="h6">
                Шаблонизатор документов
              </Typography>
            </Box>

            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.primary.light,
                width: "100%",
                height: "62px",
                "&:hover": {
                  backgroundColor: theme.palette.primary.dark
                }
              }}>
                ВОЙТИ
            </Button>
          </Box>

          <Box sx={{
            width: "100%",
            height: "100px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <Box>
              <Typography variant="h6">
                Конструктор опросов
              </Typography>
            </Box>

            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.primary.light,
                width: "100%",
                height: "62px",
                "&:hover": {
                  backgroundColor: theme.palette.primary.dark
                }
              }}>
                ВОЙТИ
            </Button>
          </Box>

          <Box sx={{
            width: "100%",
            height: "100px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <Box>
              <Typography variant="h6">
                Сокращатель ссылок
              </Typography>
            </Box>

            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.primary.light,
                width: "100%",
                height: "62px",
                "&:hover": {
                  backgroundColor: theme.palette.primary.dark
                }
              }}>
                ВОЙТИ
            </Button>
          </Box>
            
        </Box>
      </Box>

    </React.Fragment>
  );
}


export default Authorization;