import * as React from 'react';
import SEO from 'utils/SEO';
import { EmptyMessage } from '@nova-hf/ui';
import { withTranslation, WithTranslation } from 'utils/i18n';

import Wrapper from 'components/app-layout/Wrapper';
import { Segment } from 'components/segment/Segment';

const NotFound = ({ t }: WithTranslation) => (
  <Wrapper header="dark">
    <SEO title={t('errors.notFound.title')} />

    <Segment container>
      <div style={{ margin: 'auto', width: '100%' }}>
        <EmptyMessage
          title={t('errors.notFound.title')}
          description={t('errors.notFound.subtitle')}
        />
      </div>
    </Segment>
  </Wrapper>
);

NotFound.getInitialProps = async () => {
  return {
    namespacesRequired: ['common'],
  };
};

export default withTranslation('common')(NotFound);