import * as React from "react";
import { Box, Typography, Button } from "@mui/material";
import { ThemeProvider } from "@mui/material";
import theme from "../../theme";
import CssBaseline from '@mui/material/CssBaseline';
import Logo from "../Logo";


const Authorization: React.FC = () =>  {
  return (
    <React.Fragment>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Box sx={{
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.secondary.main,
            height: "100%"
        }}>
          <Box sx={{
            width: "100vw",
            height: "100vh",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
          }}>
            <Box sx={{
              width: "350px",
              height: "700px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              alignItems: "center",
            }}>
              
              <Logo />

              <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.content.main,
                    width: "50%",
                    height: "62px",
                    "&:hover": {
                      backgroundColor: theme.palette.menu.main
                    }
                  }}>
                    ВОЙТИ
                </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.content.main,
                    width: "50%",
                    height: "62px",
                    "&:hover": {
                      backgroundColor: theme.palette.menu.main
                    }
                  }}>
                    ВОЙТИ
                </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.content.main,
                    width: "50%",
                    height: "62px",
                    "&:hover": {
                      backgroundColor: theme.palette.menu.main
                    }
                  }}>
                    ВОЙТИ
                </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.content.main,
                    width: "50%",
                    height: "62px",
                    "&:hover": {
                      backgroundColor: theme.palette.menu.main
                    }
                  }}>
                    ВОЙТИ
                </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.content.main,
                    width: "50%",
                    height: "62px",
                    "&:hover": {
                      backgroundColor: theme.palette.menu.main
                    }
                  }}>
                    ВОЙТИ
                </Button>
              </Box>

            </Box>
          </Box>
        </Box>
      </ThemeProvider>
    </React.Fragment>
  );
}


export default Authorization;