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

export const NotFound = () => {
  const navigate = useNavigate();

  return (
    <div className='d-flex flex-grow-1'>
      <ContentCard fullPage>
        <div
          className='d-flex flex-column justify-content-center align-items-center'
          style={{ minHeight: '100%' }}
        >
          <div>
            <header className='text-center'>
              <Icon
                iconName='ExclamationTriangle'
                size={128}
                className='text-warning mb-3'
              />
              <h1>404: Not Found</h1>
              <p className='lead'>
                The server cannot find the requested resource. Please verify the
                URL, or click the button below to return to the application.
              </p>
            </header>
            <hr />
            <div className='d-flex justify-content-center align-items-center'>
              <Button variant='outline-primary' onClick={() => navigate('/')}>
                Return to Application
              </Button>
            </div>
          </div>
        </div>
      </ContentCard>
    </div>
  );
};
