import React from "react";
import { Link, useRouteError } from "react-router-dom";
import notFound from "../assets/notFound.svg";
import other from "../assets/other.svg";


const ErrorPage = () => {
    const error = useRouteError();
    console.log(error);
    
    if (error.status === 404) {
        return (
            <div className="errorContainer">
                <img className="errorImage" src={notFound} alt="404" />
                <h4 className="errorMessage">Oops!! The resource requested is not available.</h4>
                <Link className="backHome" to="/">Back Home</Link>
            </div>
        );
    }

    return (
        <div className="errorContainer">
            <img className="errorImage" src={other} alt="other" />
            <h4 className="errorMessage">
                Oops! Something went wrong.<br />
                We encountered an unexpected issue while processing your request.<br />
                Please try refreshing the page, or come back later.
            </h4>
            <Link className="backHome" to="/">Back Home</Link>
        </div>
    );
};

export default ErrorPage;