import React from "react";
import Map, { GeolocateControl, Marker } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import Image from "next/image";

function ShowMap({
  lat,
  lng,
  height,
}: {
  lat: string | number;
  lng: string | number;
  height: string;
}) {

  return (
    <Map
      style={{ height: height }}
      initialViewState={{
        longitude: Number(lng),
        latitude: Number(lat),
        zoom: 12,
      }}
      mapboxAccessToken="pk.eyJ1IjoiYWxkZjkyIiwiYSI6ImNscHh5ZG56dTByMXAycnJ2cDNmdDQ5M3YifQ.a_sUt1rLFMfA0jHrETcM7A"
      mapStyle="mapbox://styles/mapbox/streets-v11"
    >
      <GeolocateControl />
      {lat && lng && (
        <Marker latitude={Number(lat)} longitude={Number(lng)}>
          <Image
            alt="location icon"
            className="-mt-5"
            width={25}
            height={25}
            src={"/images/icons/location.svg"}
          />
        </Marker>
      )}
    </Map>
  );
}

export default ShowMap;
