/* eslint-disable react/no-unescaped-entities */
import React from 'react';

import useTranslate from '~hooks/useTranslate/useTranslate';

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

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

export default NotFound;
