import React from 'react';
import { Icon } from 'antd';
import Page from 'components/Page/index.jsx';
import styled from 'styled-components';

const StyledDiv = styled.div`
  color: black;
  text-align: center;
  position: absolute;
  top: 48%;
  margin-top: -50px;
  left: 50%;
  margin-left: -100px;
  width: 200px;

  :global .anticon {
    font-size: 48px;
    margin-bottom: 16px;
  }

  h1 {
    font-family: cursive;
  }
`;

const Error = () => {
  return (
    <Page>
      <StyledDiv>
        <Icon type='frown-o' />
        <h1>404 Not Found</h1>
      </StyledDiv>
    </Page>
  );
};

export default Error;