import { MapContainer, TileLayer, useMap } from 'react-leaflet'

const NZ_BOUNDS = [
  [-47.204642, 165.344238],
  [-34.307144, 179.824219]
]

function FitNewZealandBounds() {
  const map = useMap()
  map.fitBounds(NZ_BOUNDS)
  return null
}

export default function Map() {
  return (
    <div className="map-container">
      <MapContainer scrollWheelZoom={true}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <FitNewZealandBounds />
      </MapContainer>
    </div>
  )
}