import {
  useRouteError,
  type ErrorResponse,
  isRouteErrorResponse,
} from "react-router";

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

  if (isRouteErrorResponse(error)) {
    const statusError = error as ErrorResponse;
    if (statusError.status == 404) {
      return (
        <div>
          <h1>页面不存在</h1>
        </div>
      );
    } else {
      return (
        <div>
          <h1>错误</h1>
          <h3>状态码：{statusError.status}</h3>
          <h3>消息：{statusError.statusText}</h3>
          <h3>数据{JSON.stringify(statusError.data)}</h3>
        </div>
      );
    }
  } else if (error instanceof Error) {
    const err = error as Error;
    return (
      <div>
        <h1>错误</h1>
        <h3>名称：{err.name}</h3>
        <h3>消息：{err.message}</h3>
      </div>
    );
  } else {
    return (
      <div>
        <h1>未知错误</h1>
      </div>
    );
  }
}