import React from "react";
import { NextPage } from "next";
import Head from "next/head";
import styled from "styled-components";
import Header from "@components/Header";

const NotFound = styled.main`
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    text-align: center;
    font-size: 4rem;
    font-weight: 200;
  }
`;

const NotFoundPage: NextPage = () => (
  <>
    <Head>
      <title>404 | Ei vaan löydy</title>
      <meta name="robots" content="noindex" />
    </Head>
    <Header />
    <NotFound id="not-found">
      <p>
        <strong>404</strong> | Ei&nbsp;vaan&nbsp;löydy
      </p>
    </NotFound>
  </>
);

export default NotFoundPage;
