import React from 'react';
import { useNavigate } from 'react-router';
import { Button } from 'react-bootstrap';
import Full from '../components/Full';
import './NotFound.scss';

const NotFound: React.FC = () => {
  const navigate = useNavigate();

  return (
    <Full className="not-found-container">
      <div className="not-found-content">
        <div className="not-found-code">404</div>
        <h1 className="not-found-title">Page Not Found</h1>
        <p className="not-found-message">
          Sorry, the page you're looking for doesn't exist or may have been moved.
        </p>
        <Button
          variant="primary"
          size="lg"
          onClick={() => navigate('/')}
          className="not-found-button"
        >
          Return to Home
        </Button>
      </div>
    </Full>
  );
};

export default NotFound;
