import * as styles from "./styles.module.css";

const statusCodes: { [code: number]: string } = {
  400: "Bad Request",
  404: "This page could not be found",
  405: "Method Not Allowed",
  500: "Internal Server Error",
};

export type ErrorProps = {
  statusCode: number;
  title?: string;
};

export const RouteError = ({ statusCode, title }: ErrorProps) => {
  const errorTitle =
    title || statusCodes[statusCode] || "An unexpected error has occurred";

  return (
    <div className={styles.error}>
      <div>
        <style
          dangerouslySetInnerHTML={{
            __html: `
                body { margin: 0; color: #000; background: #fff; }
                .${styles.h1} {
                  border-right: 1px solid rgba(0, 0, 0, .3);
                }
                @media (prefers-color-scheme: dark) {
                  body { color: #fff; background: #000; }
                  .${styles.h1} {
                    border-right: 1px solid rgba(255, 255, 255, .3);
                  }
                }
              `,
          }}
        />

        {statusCode ? <h1 className={styles.h1}>{statusCode}</h1> : null}
        <div className={styles.desc}>
          <h2 className={styles.h2}>
            {title || statusCode ? (
              errorTitle
            ) : (
              <>
                Application error: a client-side exception has occurred (see the
                browser console for more information)
              </>
            )}
            .
          </h2>
        </div>
      </div>
    </div>
  );
};