import React, { useEffect, useState } from "react";
import LoginHeader from "../components/LoginHeader";
import { Link } from "react-router-dom";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import ReactHtmlParser from "react-html-parser";
import { fetchEmailByID } from "../helpers/emails";
import { CssBaseline } from "@mui/material";

// Intro Page containing play button and how to play button
const IntroPage = () => {
  return (
    <Box>
      {/* Header with manage button, which redirects to admin section */}
      <LoginHeader />
      <Box
        sx={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <Typography variant="h4">Phishing training</Typography>
          <Divider
            flexItem={true}
            style={{
              height: "1px",
              backgroundColor: "#FFFFFF",
              marginTop: 10,
            }}
          />
          {/* Play button, redirects to page where user has to enter username */}
          <Button
            size="large"
            style={{
              width: "160px",
              marginTop: 30,
              marginBottom: 30,
            }}
            variant="contained"
            color="primary"
            component={Link}
            to="/username"
          >
            Play
          </Button>
          {/* How to play button, redirects to page containing instructions for playing */}
          <Button
            size="large"
            style={{
              width: "160px",
            }}
            variant="contained"
            color="primary"
            component={Link}
            to="/instructions"
          >
            How to play
          </Button>
        </Box>
      </Box>
    </Box>
  );
};

export default IntroPage;
