import { Layer, Source } from "react-map-gl";

const greyMap =
  "https://api.mapbox.com/styles/v1/ghermant/cla2nwk5f00el14nxvtjlsi6z/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2xhMm5zZ3ZrMDF4MDN2bzc5Yjd0ZjZ1dCJ9.fqnvrEqKKBoguR7R6DR7Yw";
const colorMap =
  "https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";

const positron =
  "https://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}@2x.png";

export const Basemap = () => {
  return (
    <Source type={"raster"} id={"basemap"} tiles={[greyMap]} tileSize={256}>
      <Layer
        type={"raster"}
        source={"basemap"}
        id={"basemap-layer"}
        paint={{}}
      />
    </Source>
  );
};
