import { useState } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import ProjectTile from "./ProjectTile.jsx";
import PhotoHover from "./PhotoHover.jsx";

export default function Projects() {
  const [image, setImage] = useState();
  const [open, setOpen] = useState(false);

  function openPhoto(image) {
    setImage(image);
    setOpen(true);
  }

  return (
    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="portfolio">
      <PhotoHover
        image={image}
        open={open}
        setOpen={setOpen}
        alt={"Missing Project Photo"}
      />
      <div style={{ display: "flex" }}>
        <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
          Projects
        </Typography>
      </div>
      <ProjectTile
        image="/portfolio/projects/minecluster.png"
        title="Minecluster"
        year="2023"
        link="https://gitea.dunemask.net/elysium/minecluster"
        openPhoto={openPhoto}
      >
        Deploy and monitor MInecraft servers in your kubernetes cluster. Easily
        scales and provides a stateful experience to make managing multiple
        servers simple.
      </ProjectTile>
      <ProjectTile
        image="/portfolio/projects/qualiteer.png"
        title="Qualiteer"
        year="2022"
        link="https://gitea.dunemask.net/elysium/qualiteer"
        openPhoto={openPhoto}
      >
        Manage failing tests and silence unecessary alerts. Check the state of
        your services worldwide and improve developer confidence with a simple
        interface.
      </ProjectTile>
      <ProjectTile
        image="/portfolio/projects/khufu.png"
        title="Khufu"
        year="2021"
        link="https://gitea.dunemask.net/elysium/khufu"
        openPhoto={openPhoto}
      >
        Basic cloud file management built on React class components. Simple
        interface allows users to upload, delete, and multiple files.
      </ProjectTile>
      <ProjectTile
        image="/portfolio/projects/codepen.png"
        title="Codepen"
        year="2020"
        link="https://gitea.dunemask.net/dunemask/codepen"
        openPhoto={openPhoto}
      >
        Visual replication of the website{" "}
        <a
          href="https://codepen.io"
          style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}
        >
          codepen.io
        </a>{" "}
        webpage in 2020. Simple demonstration of css and html
      </ProjectTile>
      <ProjectTile
        image="/portfolio/projects/movieplayer.png"
        title="Media Player"
        year="2018"
        link="https://legacy-21.dunemask.net/files/java/MoviePlayer.jar"
        openPhoto={openPhoto}
      >
        Simple media player built on javafx. Player supports media seeking,
        playback controls, and speed distortion.
      </ProjectTile>
      <ProjectTile
        image="/portfolio/projects/voxelcraft.png"
        title="Voxelcraft"
        year="2018"
        link="https://gitea.dunemask.net/dunemask/voxelcraft"
        openPhoto={openPhoto}
      >
        Voxel game built on a simple rendering engine written with JavaFX.
        Generate your terrain and form your ideal world by exploring and
        harvesting resources.
      </ProjectTile>
    </Box>
  );
}