import { useParams } from "@modern-js/runtime/router";
import type { LoaderFunction } from "@modern-js/runtime/router";
import { ErrorPage } from "@/ui/errors/ErrorPage.js";

/** Set the correct HTTP response status to match the error code (TZ §4.1.21). */
export const loader: LoaderFunction = ({ params }) => {
  const code = params["code"];
  const status = code === "404" ? 404 : code === "503" ? 503 : 500;
  throw new Response(null, { status });
};

// errorElement renders the branded page when the loader throws above.
export default function ErrorRoute(): JSX.Element {
  const { code } = useParams<{ code: string }>();
  return <ErrorPage {...(code ? { code } : {})} />;
}
