import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ErrorPageContainer, Row, Title, Description, DescriptionContent, Link, } from './ErrorPageStyle';
import { Button } from '../buttonv2/Buttonv2.component';
import { Icon } from '../icon/Icon.component';
const translations = {
    en: {
        unexpected_error: 'Not authorized',
        error_desc: `You don't have permission to view this page using the credentials you have supplied.`,
        may_also_contact: 'You can contact ',
        to_report_issue: ' to report this issue.',
        return_home: 'Return Home',
    },
    fr: {
        unexpected_error: `Accès refusé`,
        error_desc: `Les identifiants fournis ne vous permettent pas de consulter cette page.`,
        may_also_contact: 'Vous pouvez contacter le ',
        to_report_issue: ' pour signaler le problème.',
        return_home: "Retour à l'accueil",
    },
};
function ErrorPage401({ supportLink = undefined, locale = 'en', onReturnHomeClick, ...rest }) {
    if (!translations[locale])
        locale = 'en';
    // Ensure the locale formatting is consistent
    locale = locale.toLowerCase();
    return (_jsxs(ErrorPageContainer, { className: "sc-error-page401", ...rest, children: [_jsxs(Row, { children: [_jsx(Icon, { name: "Exclamation-triangle", size: "2x", color: "statusWarning" }), _jsx(Title, { children: translations[locale].unexpected_error })] }), _jsx(Row, { children: _jsxs(Description, { children: [_jsx(DescriptionContent, { children: translations[locale].error_desc }), supportLink && (_jsxs(DescriptionContent, { children: [translations[locale].may_also_contact, _jsxs(Link, { href: supportLink, children: ["support ", _jsx(Icon, { name: "External-link" })] }), translations[locale].to_report_issue] }))] }) }), onReturnHomeClick && (_jsx(Button, { label: translations[locale].return_home, variant: "secondary", onClick: onReturnHomeClick }))] }));
}
export { ErrorPage401 };
