import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import SpeakerIcon2 from './Icons/SpeakerIcon2';
import BlackProjectorIcon from './icons/BlackProjectorIcon';
import MicrophoneIcon from './Icons/MicrophoneIcon';
import StationeryIcon from './Icons/StationeryIcon';
import LecternIcon from './Icons/LecternIcon';
import FlipChartIcon from './Icons/FlipChartIcon';
import MoreIcon from './Icons/MoreIcon';
import "./AdditionalAmenitiesModal.css"


function MyVerticallyCenteredModal(props) {
  return (
    <Modal
      {...props}
      // size="sm"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <div className='modal-title'>
        <Modal.Title>
          More Amenities
        </Modal.Title> 
        </div>
 
      </Modal.Header>
      <Modal.Body>
      
        <div className="additional-amenities">
          <div className="amenities-container">

                <div className="d-flex additional-amenity">
                  <BlackProjectorIcon className="mr-1" /> 
                  <Container>High Definition Projector</Container>
                </div>

                <div className="d-flex additional-amenity">
                  <MicrophoneIcon className="mr-1" /> 
                  <Container>Microphone</Container>
                </div>

                <div className="d-flex additional-amenity">
                  <StationeryIcon className="mr-1" /> 
                  <Container>Stationery</Container>
                </div>

                <div className="d-flex additional-amenity">
                  <FlipChartIcon className="mr-1" /> 
                  <Container>Flip Charts</Container>
                </div>

                <div className="d-flex additional-amenity">
                  <LecternIcon className="mr-1" /> 
                  <Container>Lectern</Container>
                </div>

                <div className="d-flex additional-amenity">
                  <SpeakerIcon2 className="mr-1" /> 
                  <Container>Additional Speakers</Container>
                </div>

          </div>
        
        </div>

    
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

export default function AllAmenitiesModalHome() {
  const [modalShow, setModalShow] = React.useState(false);

  return (
    <>
      <button className="additional-amenity-btn" onClick={() => setModalShow(true)}>
        <MoreIcon/>
      </button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </>
  );
}