import type { ReactNode } from 'react';
import React from 'react';
import { LoadingSpinner, Modal } from '@theorchard/suite-components';
import cx from 'classnames';
import './progress-modal.scss';

export interface ProgressModalPropTypes {
    headerLabel: ReactNode;
    isOpen: boolean;
    modalContent: ReactNode;
    footer?: ReactNode;
    className: string;
}

export const ProgressModal: React.FC<ProgressModalPropTypes> = ({
    headerLabel,
    isOpen,
    modalContent,
    footer,
    className,
}) => (
    <Modal
        isOpen={isOpen}
        className={cx({
            ProgressModal: true,
            [className]: true,
        })}
        onRequestClose={() => ({})}
        zIndex={2}
    >
        <div className="ProgressModal-spinner">
            <LoadingSpinner show={true} testId="ProgressModalSpinner" />
        </div>
        <div className="ProgressModal-Header">
            <h2>{headerLabel}</h2>
        </div>
        <div className="ProgressModal-Content">{modalContent}</div>
        {footer && <div className="ProgressModal-Footer">{footer}</div>}
    </Modal>
);