import { Box, Container, useTheme } from "@mui/material";
import { useAtom } from "jotai";
import { HeaderBar } from "../components/HeaderBar/HeaderBar";
import { SqlInjection } from "../components/Pages/SqlInjection/SqlInjection";
import { routeAtom } from "../lib/jotai";

export default function Index() {
  // contexts
  const theme = useTheme();

  // atoms
  const [route, setRoute] = useAtom(routeAtom);

  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.default,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <HeaderBar />
      <Container
        maxWidth="lg"
        sx={{
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          overflow: "auto",
          p: 1,
        }}
      >
        {/* main content goes here buddy */}
        <SqlInjection />
      </Container>
    </Box>
  );
}