import React from 'react'

const ModalView = (props) => {
    const { show } = props
    const style = show ? {display: 'block', opacity: 1, marginTop: '10%' } : {}
    return(<>
    <div id="myModal" className={`modal fade ${show && 'in'}`} style={ style } role="dialog">
        <div className="modal-dialog">
            <div className="modal-content">
                {props.children}
            </div>
        </div>
    </div>
    {show &&<div className='modal-backdrop fade in' style={{opacity: 0.8}}></div>}
    </>
    )
}
const Header = (props) => {
    const { handleClose } = props
    return(
        <div className="modal-header">
          { props.children }
          <button type="button" onClick={ handleClose } className="close" data-dismiss="modal">&times;</button>
         
        </div>)
}
   
const Body = (props) => {
    return( <div className="modal-body">
    {props.children}
  </div>
  )
}
const Footer =( props ) => { 
    return(
  <div class="modal-footer">
   {props.children}
  </div>)
}

ModalView.Header = Header
ModalView.Body = Body
ModalView.Footer = Footer
export default ModalView