import * as React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";
import Typography from "@mui/material/Typography";
import LoginHeader from "../components/LoginHeader";

// Page with instructions how to play the game
export default function InstructionPage() {
  return (
    <Box>
      {/* header with settings button, redirects to admin section */}
      <LoginHeader />
      <Box
        sx={{
          height: "100%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Paper
          variant="outlined"
          sx={{
            maxWidth: 550,
            p: { xs: 1, sm: 3 },
          }}
        >
          <Typography component="h1" variant="h4" align="center">
            How to play
          </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 help window on the right side of
            the screen. After you answer all emails, you will get statistics of
            gamerun.
          </Typography>
          <Box sx={{ display: "flex", justifyContent: "center" }}>
            <Button variant="contained" component={Link} to="/">
              BACK
            </Button>
          </Box>
        </Paper>
      </Box>
    </Box>
  );
}
