import { h, render, Component } from "preact";
import {
  Grid,
  Container,
  Card,
  CardHeader,
  CardMedia,
  CardActions,
  CardContent,
  Typography,
  Button,
} from "@material-ui/core";
import Monq from "../static/images/Monq.jpg";

class GameProjects extends Component {
  constructor(props) {
    super(props);
    this.content = [
      {
        header: "Monq",
        subheader: "D-tail Entertainment - Programmer",
        image: Monq,
        imageAltText: "Monq",
        content: `Technically this was my first attempt at creating a startup with
university friends. However we over scoped when it came to having an interesting
platformer in a single year when it came to our USP of time mechanics and our
artist's great work. This paired with a lack of design and writing put too much
emphasis on the previously mentioned time mechanics without adequately designed
levels to show that off nor create a hook to keep people interested in the game.`,
        buttonText: "Learn More",
        buttonLink: "https://d-tail-entertainment.itch.io/monq",
      },
      {
        header: "Graphics",
        subheader: "Bsc (hons) Computing for Games - Falmouth University",
        image: undefined,
        imageAltText: "Need up to date image",
        content: `This is where I learned how to create a graphics engine from
scratch using OpenGL and was the project which I enjoyed the most during my
bachelors degree. I especially enjoyed how deep I jumped into C++ to improve it's
memory footprint returning to this project in my final year of university.`,
        buttonText: "Need link",
        buttonLink: undefined,
      },
    ];
  }

  render = () => {
    return (
      <Container>
        <p />
        <Typography variant="h4">Game Projects</Typography>
        <Grid container spacing={3}>
          {this.content.map((project) => {
            return (
              <Grid item sm="12" md="6">
                <Card>
                  <CardHeader
                    title={project.header}
                    subheader={project.subheader}
                  />
                  <CardMedia
                    style={{ height: 0, paddingTop: "25%" }}
                    image={project.image}
                    title={project.imageAltText}
                  />
                  <CardContent>
                    <Typography variant="body1">{project.content}</Typography>
                  </CardContent>
                  <CardActions>
                    <Button
                      target="_blank"
                      href={project.buttonLink}
                      color="primary"
                    >
                      {project.buttonText}
                    </Button>
                  </CardActions>
                </Card>
              </Grid>
            );
          })}
        </Grid>
      </Container>
    );
  };
}
export default GameProjects;
