import React from "react";
import { Link } from "react-router-dom";

const NotFound: React.FC = () => {
  return (
    <div className="container mt-5 mb-5">
      <div className="row justify-content-center">
        <div className="col-md-8 col-lg-6 text-center">
          <h3 className="text-muted mb-5">
            We can't find the page you're looking for!
          </h3>

          <div className="d-flex flex-column gap-3">
            <Link to="/" className="btn btn-primary btn-lg">
              Go to Home Page
            </Link>

            <p className="text-muted mb-0">or go to one of these</p>

            <div className="d-flex flex-wrap justify-content-center gap-2">
              <Link to="/items" className="btn btn-outline-secondary">
                Browse Items
              </Link>
              <Link to="/forum" className="btn btn-outline-secondary">
                Community Forum
              </Link>
              <Link to="/faq" className="btn btn-outline-secondary">
                FAQ
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotFound;