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

function MapView({ lat, lng, handle, expandMap, toggleMap }) {
  return (
    <div className={`map ${handle?.active ? "fullscreen" : ""}`}>
      <iframe
        className="gmap_iframe"
        src={`https://www.google.com/maps?q=${lat},${lng}&output=embed`}
        title="Google Map"
        loading="lazy"
        allowFullScreen
      />

      <div className="map_controls">
        <FontAwesomeIcon
          icon={handle?.active ? faMinimize : faMaximize}
          className="map_icon"
          onClick={expandMap}
        />

        {/* <FontAwesomeIcon
          icon={faCircleXmark}
          className="map_icon"
          onClick={toggleMap}
        /> */}
      </div>
    </div>
  );
}

export default MapView;
