import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Toolbar from "@mui/material/Toolbar";
import Paper from "@mui/material/Paper";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MainHeader from "../components/MainHeader";
import Grid from "@mui/material/Grid";
const theme = createTheme();

export default function Checkout() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <MainHeader />

      <Container maxWidth="sm" sx={{ mt: "32vh" }}>
        <Paper
          variant="outlined"
          elevation="5"
          sx={{
            p: { xs: 1, sm: 3 },
          }}
        >
          <Typography component="h1" variant="h4" align="center">
            Checkout
          </Typography>
          <Typography
            sx={{ px: 4, pt: 5, pb: 4 }}
            variant="body1"
            align="center"
          >
            The goal of this game is to find out, which of the given emails are
            the phishing emails. You can open signs on the left side of the
            screen. After you answer all emails, you will get statistics.
          </Typography>
          <Box sx={{ display: "flex", justifyContent: "center" }}>
            <Button variant="contained" component={Link} to="/">
              BACK
            </Button>
          </Box>
        </Paper>
      </Container>
    </ThemeProvider>
  );
}
