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

import styles from './not-found.module.scss';

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

  return (
    <div className={styles?.wrapper || ''}>
      <h2>
        {translate(
          translations,
          'main_404_title',
          `Oops! We can't seem to find that page anymore.`
        )}
      </h2>
      <div className={styles?.textBlock || ''}>
        <p>
          {translate(
            translations,
            'second_404_title',
            `While you're here though, why not check out these top South African Casinos:`
          )}
        </p>
      </div>
    </div>
  );
};

export default NotFound;
