import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isRouteErrorResponse, useRouteError } from 'react-router';
import styled from '@darajs/styled-components';
import { Button } from '@darajs/ui-components';
import Center from '../shared/center/center';
import ErrorStatusCodePage, { errorMessages } from './error-status-code-page';
const CenteredDivWithGap = styled(Center) `
    gap: 1rem;
    margin: 10px;
    text-align: center;
`;
function RootErrorPage() {
    const error = useRouteError();
    // errors from loaders - can happen normally
    if (isRouteErrorResponse(error)) {
        // show a regular error page when the error code is known
        if (String(error.status) in errorMessages) {
            return _jsx(ErrorStatusCodePage, { code: String(error.status) });
        }
        _jsxs(CenteredDivWithGap, { children: [_jsxs("h1", { children: [error.status, " ", error.statusText] }), _jsx("p", { children: "Try again or contact the application owner" }), _jsx(Button, { href: "/login", styling: "error", children: "Go to home" })] });
    }
    // eslint-disable-next-line no-console
    console.error(error);
    // some error thrown, show the actual error
    if (error instanceof Error) {
        _jsxs(CenteredDivWithGap, { children: [_jsx("h1", { children: error.message }), _jsx("pre", { children: error.stack }), _jsx(Button, { href: "/login", styling: "error", children: "Go to home" })] });
    }
    return (_jsxs(CenteredDivWithGap, { children: [_jsx("h1", { children: "Unexpected error occurred" }), _jsx("pre", { children: String(error) }), _jsx(Button, { href: "/login", styling: "error", children: "Go to home" })] }));
}
export default RootErrorPage;
//# sourceMappingURL=root-error-page.js.map