import React, {useState} from 'react';
import { createPortal } from 'react-dom';
import './ActionsModal.scss';

type ActionModalProps =  {
    children?: React.ReactNode
    onClose?: () => void
    customFunction?: () => void
    customClass?: string
}

const ActionModal = (props: ActionModalProps) => {

    return (
        createPortal (
            <div id="modal-overlay" className={`actions-modal-overlay ${props.customClass}`} onClick={(e) => {
                // @ts-ignore
                e.target?.id === 'modal-overlay' && props.onClose && props.onClose()
            }
            }>
                <div id='action-modal'
                     // onClick={(e) => e.stopPropagation()}
                >
                    {props.children}
                </div>
            </div>, document.body
        ) 
    );
};

export default ActionModal;