import React from 'react';
import { useTranslation } from 'react-i18next';
import { Typography } from '../../../UI/dataDisplay/typography/Typography';
import { LayoutUnit } from '../../../layout/LayoutUnit';
/**
 * @file HostedPaymentError.tsx
 * @description This component displays an error message when there is an issue rendering the hosted payment form.
 */
/**
 * HostedPaymentError component
 *
 * This component is used to display an error message when there is an issue rendering the hosted payment form.
 * It utilizes the `useTranslation` hook to support internationalization.
 *
 * @param {Object} props - The properties object.
 * @param {string} props.error - The error string.
 * @param {string} props.message - The error message to be displayed.
 *
 * @returns {JSX.Element} The rendered error message component.
 */
export const HostedPaymentError = ({ error, message }) => {
    const { t } = useTranslation();
    return (React.createElement(React.Fragment, null, React.createElement(Typography, { variant: "subtitle1", color: "error" }, t('There was an error rendering the hosted payment form. Please check your settings and try again')), React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(Typography, { variant: "body1", color: "error" }, t('Error'), ": ", message)));
};
//# sourceMappingURL=HostedPaymentError.js.map