import { useRouteError } from "react-router-dom";
import "./stylesheets/shared.css";
import MainContentLayout from "./main_content_layout";

export default function ErrorPage() {
  const error = useRouteError();

  return(
    <MainContentLayout>
      <div className="flex flex-col justify-center my-2">
        <div>
          <h1 className="text-3xl">
            Error {error.status}
          </h1>
        </div>
        <div className="text-xl">
          {error.error.message || error.statusText}
        </div>
      </div>
    </MainContentLayout>
  );
}