import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import MapButtonControls from "../CanvasComponents/MapButtonControls";
import MapSettingsButton from "../CanvasComponents/MapSettingsButton";

export default function GlobalMap() {
  const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]

  return (
    <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; OpenStreetMap contributors'
      />
      <MapButtonControls settingsBtn = {<MapSettingsButton />} position="topright" />
      <Marker position={position}>
        <Popup>
          CVO — Home of the volcanoligists
        </Popup>
      </Marker>
    </MapContainer>
  );
}