/**
 * @file ApplicationError.tsx - Application error page component with a button that navigates the user back to the home page.
 */

import { useNavigate } from 'react-router-dom';
import { ContentCard } from '../components/ContentCard.tsx';
import { Icon } from '../components/Icon.tsx';
import { Button } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';

/**
 * General application error page that directs user back to application.
 */
export const ApplicationError = () => {
  const navigate = useNavigate();

  const { t } = useTranslation(undefined, {
    keyPrefix: 'pages.application_error',
  });

  return (
    <div className={'d-flex flex-grow-1'}>
      <ContentCard fillPage>
        <div
          className={
            'd-flex flex-column justify-content-center align-items-center'
          }
          style={{ minHeight: '100%' }}
        >
          <div>
            <header className={'text-center'}>
              <Icon
                iconName={'Bug'}
                size={128}
                className={'text-danger mb-3'}
              />
              <h1>{t('header.title')}</h1>
              <p className={'lead'}>{t('header.subtitle')}</p>
            </header>
            <hr />
            <div className={'d-flex justify-content-center align-items-center'}>
              <Button variant={'outline-primary'} onClick={() => navigate('/')}>
                {t('buttons.return_to_application.default')}
              </Button>
            </div>
          </div>
        </div>
      </ContentCard>
    </div>
  );
};
