import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { useAppSelector } from 'src/app/redux/store';
import { _cx } from 'src/utility/class';
import css from './ModalModule.module.scss';
import ModalComp from './dynamic/Modal';
import Button from 'src/components/Button';
var cx = _cx(css);
var ModalModule = function (props) {
    var setShowModal = props.setShowModal, size = props.size, children = props.children, title = props.title, modalHeader = props.modalHeader, subTitle = props.subTitle, description = props.description, closeButton = props.closeButton, padding = props.padding;
    var _a = useAppSelector(function (state) { return state.config.config; }), language = _a.language, languageData = _a.languageData;
    var t = languageData[language];
    return (_jsx(ModalComp, { show: true, size: size, onHide: function () { return setShowModal(false); }, centered: true, className: cx('container-modal'), children: _jsxs("div", { className: cx('modal-main'), children: [_jsxs("div", { className: cx('modal-header'), style: { padding: padding }, children: [_jsx("div", { className: cx('close'), onClick: function () { return setShowModal(false); }, children: _jsx("svg", { width: "15", height: "16", viewBox: "0 0 15 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.5 15.5L0 14L6 8L0 2L1.5 0.5L7.5 6.5L13.5 0.5L15 2L9 8L15 14L13.5 15.5L7.5 9.5L1.5 15.5Z", fill: "#3D3935" }) }) }), modalHeader && _jsx("p", { className: cx('modalHeader'), children: modalHeader }), (subTitle || description) && (_jsxs("div", { className: cx('modal-subheadings'), children: [subTitle && _jsx("h2", { className: cx('headline'), children: subTitle }), description && (_jsx("p", { className: cx('description'), dangerouslySetInnerHTML: {
                                        __html: description === null || description === void 0 ? void 0 : description.replace('®', '<sup>®</sup>'),
                                    } }))] }))] }), title && _jsx("div", { className: cx('title'), children: title }), children, closeButton && (_jsx(Button, { styleType: 'primary', onClick: function () { return setShowModal(false); }, width: size === 'lg' ? '335px' : '100%', buttonStyle: { alignSelf: 'center' }, children: t.close || 'Close' }))] }) }));
};
export default memo(ModalModule);
