import React from 'react';
import Link from 'gatsby-link';
import { Flex, Text } from '@rebass/emotion';
import theme from 'utils/theme';
import Layout from 'components/layout';

const ContentPage = (): JSX.Element => {

  return (
    <Layout shouldDisableHybridHeader>
      <Flex
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
        mt={[theme.space[4], theme.space[6]]}
      >
        <Text
          as="h4"
          textAlign="center"
        >
          404 – Page not found
        </Text>
        <Text
          as="p"
          textAlign="center"
        >
          You can try returning to the <Link to="/">homepage</Link> or view our <Link to="/shop">products</Link>.
        </Text>
      </Flex>
    </Layout>
  );
};

export default ContentPage;