import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Modal from 'react-bootstrap/Modal';
import Row from 'react-bootstrap/Row';
export default function AllAmenitiesModal(props) {
  return (
    <Modal {...props} aria-labelledby="contained-modal-title-vcenter">
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Room Functions
        </Modal.Title>
      </Modal.Header>
      <Modal.Body className="grid-example">
        <Container>
                  <h6> This room is used for:</h6>
                  <br></br>
                  <Row>
                      <Col>
                          <ul>
                             {props.equipment?.map((idx, amenity) => <li key={idx}>{props.equipment[amenity]}</li>)}
                          </ul> 
                      </Col>
                      
                  </Row>
        </Container>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}