import React from 'react';
import Modal from 'react-modal';

class ModalDescripcionCarga extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { selectedModal, contentLabel,
            label } = this.props;
        const customStyles = {
            content: {
                position: 'fixed',
                position: 'absolute',
                top: '25%',
                left: '13%',
                right: '13%',
                bottom: '25%',
                //top: '50%',
                //left: '50%',
                //right: 'auto',
                width: '75%',
                height: '45%',
                //bottom: 'auto',
                //marginRight: '-50%',
                //transform: 'translate(-50%, -50%)',
                padding: '5px'
            },
            overlay: {
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
            },
        };

        return (
            <Modal
                isOpen={selectedModal}
                contentLabel={contentLabel}
                style={customStyles}
                ariaHideApp={false}
            >
                <div className="">
                    <div className="">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.props.cerrarModal}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h2 className="modal-title" id="exampleModalLabel">{label}</h2>

                        </div>
                        <div className="modal-body">
                            <div className="text-center">
                                <img className="img img-responsive" src={this.props.imgDescripcion}></img>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={this.props.cerrarModal}>Aceptar</button>

                        </div>
                    </div>
                </div>
            </Modal>
        )



    }
}
export default ModalDescripcionCarga;