/* eslint-disable react/no-unescaped-entities */
import React, { useContext } from 'react';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import styles from './not-found.module.scss';
import { translate } from '~helpers/getters';

const NotFound = () => {
  const { translations } = useContext(Context) || {};

  return (
    <div className={styles.wrapper || ''}>
      <h2>{translate(translations, 'main_404_title', 'Oops, Something Went Wrong.')}</h2>
      <div className={styles.textBlock || ''}>
        {translate(
          translations,
          'second_404_title',
          'It seems the page you are looking for does not exist. Try these useful links:'
        )}
      </div>
    </div>
  );
};

export default NotFound;
