import React, { FC } from "react";
import { Modal } from "react-bootstrap";

export type ModalProps = {
  title?: string,
  children: JSX.Element
  show: boolean | undefined;
  backbutton?: JSX.Element | undefined
  onHide?: React.MouseEventHandler<HTMLButtonElement>
}



const BaseModal: FC<ModalProps> = ({ title, children, show, backbutton, onHide}) => {
  const wrapper = React.useRef(null);
  return (

    <Modal 
    wrapper={wrapper}
    show={show} 
    bsPrefix={"modal"}
    onHide={onHide} 
    backdrop="static" 
   
    ref={wrapper}
    keyboard={false}
    dialogClassName={title?"custom-dialog":""}
    >
      <div className="c-modal"ref={wrapper}>
        <div className={title?"header":""}>
          <h2 style={{margin:0, color:"#3f4650"}}>{title}</h2>
            <div className="c-btn-container">
              {backbutton}
            </div>
        </div>
        <div >
          
          {children}
        </div>
          
      </div>
    </Modal>

  )
}

export default BaseModal;