import React from "react";
import { FullScreen } from "react-full-screen";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMaximize, faMinimize, faCircleXmark } from "@fortawesome/free-solid-svg-icons";

const MapView = ({
  lat = 18.5131838,
  lng = 73.7810866,
  showMap,
  handle,
  expandMap,
  toggleMap,
}) => {
  // Use query-based map URL that supports markers
  const mapSrc = `https://maps.google.com/maps?q=${lat},${lng}&t=&z=15&ie=UTF8&iwloc=&output=embed`;

  return (
    <FullScreen handle={handle}>
      <div
        className={`map ${!showMap ? "hidden" : "show"} ${
          handle.active ? "fullscreen" : ""
        }`}
      >
        <iframe
          className="gmap_iframe"
          frameBorder="0"
          scrolling="no"
          marginHeight="0"
          marginWidth="0"
          src={mapSrc}
          title="Google Map"
          style={{ border: 0 }}
        ></iframe>

        <div className="close">
          <div className="map-icons">
            <FontAwesomeIcon
              icon={handle.active ? faMinimize : faMaximize}
              className="map_icon expand"
              onClick={expandMap}
            />
            <FontAwesomeIcon
              icon={faCircleXmark}
              className="map_icon close-icon"
              onClick={toggleMap}
            />
          </div>
        </div>
      </div>
    </FullScreen>
  );
};

export default MapView;
