import { jsx, jsxs } from 'react/jsx-runtime';
import Modal from '../Modal/Modal.js';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';
import Button from '../Button/Button.js';

const PopUpModal = ({ isOpen, onClose, onContinue, titleMessage = 'Warning!', subTitleMessage = 'Unsaved Changes.', iconName, modalMessage = 'Your web service data will be lost. Are you sure you want to exit?', firstButtonLabel = 'Cancel', secondButtonLabel = 'Continue', buttonVariant = 'warning', border = '1px solid var(--warning-modal-border-color)', popupWidth = '420', popupHeight = '226', colorForTitleMessage = 'var(--status-button-bg-warning)', footerContent, firstButtonDisabled = false, secondButtonDisabled = false, zIndex = 1100, iconSize = 94, }) => {
    return (jsx(Modal, { overlayClassName: "custom-overlay", isOpen: isOpen, onClose: onClose, isHeaderDisplayed: false, zIndex: zIndex, children: jsxs("div", { className: 'warning_modal_container', children: [jsxs("div", { className: 'warning_modal_content', children: [jsx(Icon, { name: iconName, className: 'warning_modal_icon', width: iconSize, height: iconSize }), jsxs("div", { className: 'warning_modal_message', children: [jsxs(Typography, { fontSize: 20, fontWeight: "semi-bold", className: "warning_modal_title_wrapper", children: [' ', jsxs(Typography, { color: `${colorForTitleMessage}`, fontSize: 20, fontWeight: "semi-bold", children: [' ', titleMessage, ' '] }), ' ', subTitleMessage] }), jsxs("div", { className: "warning_modal_message_wrapper", children: [jsx(Typography, { fontSize: 16, children: modalMessage }), jsx(Typography, { as: "div", children: footerContent })] })] })] }), jsxs("div", { className: 'warning_modal_footer_button', children: [jsx(Button, { buttonHeight: "24px", variant: "secondary", label: firstButtonLabel, onClick: onClose, disabled: firstButtonDisabled }), secondButtonLabel && (jsx(Button, { buttonHeight: "24px", variant: buttonVariant || 'warning', label: secondButtonLabel, onClick: onContinue, disabled: secondButtonDisabled }))] })] }), ariaHideApp: true, isFooterDisplayed: false, customWidth: `${popupWidth}px`, customHeight: `${popupHeight}px`, boxShadow: "0px 1px 4px 0px var(--toaster-boxshadow)", border: border }));
};

export { PopUpModal as default };
//# sourceMappingURL=PopUpModal.js.map
