import React, { Component } from "react";
import { withStyles, Typography } from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import { LinkableButton } from "../interfaces/overrides";

class Missingno extends Component<any, any> {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.pageLayoutConstraints}>
        <div>
          <Typography variant="h4" component="h1">
            <b>Uh oh!</b>
          </Typography>
          <Typography variant="h6" component="p">
            The part of Hyperspace you're looking for isn't here.
          </Typography>
          <br />
          <LinkableButton to="/home" color="primary" variant="contained">
            Go back to home timeline
          </LinkableButton>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Missingno);