import React from 'react';

import { Typography, Box, Container } from '@material-ui/core';
import { Link } from 'gatsby-theme-material-ui';
import SEO from '../components/SEO';

const NotFoundPage = ({ location }) => (
  <Box
    display="flex"
    minHeight="100vh"
    alignItems="center"
    justifyContent="center"
    textAlign="center"
  >
    <SEO title="404" pathname={location.pathname} />
    <Container>
      <Typography variant="h1" gutterBottom>
        Page not found
      </Typography>
      <Typography variant="h2">
        <Link color="secondary" to="/">
          Back to our site
        </Link>
      </Typography>
    </Container>
  </Box>
);

export default NotFoundPage;