import React, { useMemo } from 'react';
import { IModalProps } from './Modal.interface';
import { ModalContainerStyle, ModalStyle } from './Modal.style';

export const Modal: React.FunctionComponent<IModalProps> & { Body: React.FunctionComponent<any> } = (props) => {
   const { children, show, name, onHide } = props;

   return (
      <>
         {show && (
            <ModalContainerStyle>
               <div className="modal-container">
                  <div className="bg-background" />
                  <div className="modal-content">
                     <>{children}</>
                  </div>
               </div>
            </ModalContainerStyle>
         )}
      </>
   );
};

Modal.Body = function ModalBody(props): JSX.Element {
   const { children, show, name, onHide, ...rest } = props;

   return (
      <>
         <ModalStyle {...rest}>{children}</ModalStyle>
      </>
   );
};
