import React from "react";
import "./Your_Location_Info_Modal.css";
import { Button, Modal } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import Back_arrow_holder from "../../Back_arrow_holder/Back_arrow_holder";
import Green_Btn from "../../common_btn/green_btn/Green_Btn";

function Your_Location_Info_Modal(props) {
  return (
    <>
      <section className="Confirm_Location_modal modal-holder">
        <Modal
          {...props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
          className="Confirm_Location_modal Your_Location_Info_Modal modal-holder"
        >
          <Modal.Header>
            <Back_arrow_holder onClick={props.onHide} />
            <Modal.Title>{props?.modalTitle}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="map-holder">
              <div
                style={{
                  maxWidth: "100%",
                  overflow: "hidden",
                  color: "red",
                  width: "100%",
                  height: "100%",
                  aspectRatio: 1 / 0.7,
                }}
              >
                <div
                  id="g-mapdisplay"
                  style={{ height: "100%", width: "100%", maxWidth: "100%" }}
                >
                  <iframe
                    style={{ height: "100%", width: "100%", border: 0 }}
                    frameBorder="0"
                    src="https://www.google.com/maps/embed/v1/place?q=bavdhan&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
                  ></iframe>
                </div>
              </div>
            </div>
          </Modal.Body>
          <div className="footer-btn-holder">

            {props?.showText && (
              <div className="text-holder">
                <h4>Bader Mohammad Nasser Al Sayer Street</h4>
                <p>Block 3 Abdullah Al-Salem, Kuwait City, Al Asimah, 25501</p>
              </div>
            )}



            <div
              className="text-center btn_holder "
              onClick={() => {
                props.onHide();
              }}
            >
              <Green_Btn btn_name={props?.btnText} />
            </div>
          </div>
        </Modal>
      </section>
    </>
  );
}

export default Your_Location_Info_Modal;
