import React from 'react';
import { Modal } from 'react-bootstrap'
import NotFound from '../../Images/not_found.png';

export default function Mostrar(props) {

    let { visible, onClose, puesto } = props

    return(
        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
            <Modal.Header>
                <button  onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Mostrar plaza</h4>
            </Modal.Header>
            <Modal.Body className="modal-body">

                <div class="data_product">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="img-container">
                                <img alt='not found cooo' src={NotFound}/>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <input value={puesto.id + " - "+ puesto.nombre} type="text" name="nombre" placeholder="Nombre de la plaza" readOnly/>
                            <input value={puesto.description} type="text" name="descript" placeholder="Descripción" readOnly/>
                            <input value={puesto.salario} type="text" name="sku" placeholder="3500" readOnly/>
                        </div>
                    </div>
                </div>

            </Modal.Body>
        </Modal>
    )
}
