import { Box, Typography, Button, Grid2 } from "@mui/material";
import { AttackItem } from "./AttackItem";

export const Home = () => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        flexGrow: 1,
        justifyContent: "center",
        p: 2,
      }}
    >
      <Box>
        <Box
          sx={{
            alignItems: "center",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <Typography
            sx={{
              mb: 2,
            }}
            variant='h3'
          >
            CSPJ Application Attack Simulator
          </Typography>
        </Box>
        <Button href='https://github.com/cspj-nyp/cspj-application'>Need help getting started?</Button>
      </Box>
      <Grid2
        container
        spacing={2}
      >
        <Grid2 size={3}>
          <AttackItem
            attackName='SQL Injection'
            routeTarget='sql_injection'
          />
        </Grid2>
        <Grid2 size={3}>
          <AttackItem
            attackName='Cross Site Scripting'
            routeTarget='xss'
          />
        </Grid2>
      </Grid2>
    </Box>
  );
};
