import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useLocation } from 'react-router';
import styled from '@darajs/styled-components';
import { Button } from '@darajs/ui-components';
import Center from '../shared/center/center';
const CenteredDivWithGap = styled(Center) `
    gap: 1rem;
    margin: 10px;
    text-align: center;
`;
const config401 = {
    description: 'Your login session may have expired. Try again.',
    styling: 'primary',
    title: 'We were not able to authenticate you',
};
export const errorMessages = {
    '403': {
        description: 'You are not authorised to access this application. Please contact the application owner to enable access.',
        styling: 'error',
        title: 'We were not able to authenticate you',
    },
    '404': {
        description: 'The requested page could not be found.',
        styling: 'error',
        title: 'Page not found',
    },
    '401': config401,
    default: config401,
};
function ErrorStatusCodePage(props) {
    var _a;
    const { search } = useLocation();
    const query = useMemo(() => new URLSearchParams(search), [search]);
    const code = (_a = props.code) !== null && _a !== void 0 ? _a : query.get('code');
    const errorConfig = (code && errorMessages[code]) || errorMessages.default;
    return (_jsxs(CenteredDivWithGap, { children: [_jsx("h1", { children: errorConfig.title }), _jsx("p", { children: errorConfig.description }), _jsx(Button, { href: "/login", styling: errorConfig.styling, children: "Retry" })] }));
}
export default ErrorStatusCodePage;
//# sourceMappingURL=error-page.js.map