import React, { useState } from 'react';
import ReactMapGL from 'react-map-gl';
import { getCenter } from 'geolib';

function Map({ searchResults }) {

   const coordinates = searchResults.map((result) => ({ 
     longitude: result.long,
     latitude: result.lat,

   }));
// The latitude and longitude of the center of the coordinates
   const center = getCenter(coordinates);

   const [viewport, setViewport] = useState({
    width: "100%",
    height: "100%",
    latitude: center.latitude,
    longitude: center.longitude,
    zoom: 10,
});

  return ( 
  <ReactMapGL
  mapStyle='mapbox://styles/shesonanadventure/cl063x0yl000r15n4frjpm9in'
  mapboxAccessToken={process.env.mapbox_key}
  {...viewport}
  onViewportChange={(nextViewport) => setViewport(nextViewport)}
  ></ReactMapGL>
  );
}

export default Map;