import React, { useState, useRef } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

function MapComponent() {
  const [zoom, setZoom] = useState(8); // Initial zoom level
  const mapRef = useRef(null);

  const handleZoomChanged = () => {
    if (mapRef.current) {
      const newZoom = mapRef.current.getZoom();
      setZoom(newZoom);
    }
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
      <GoogleMap
        id="example-map"
        mapContainerStyle={{ width: '400px', height: '400px' }}
        center={{ lat: -34.397, lng: 150.644 }}
        zoom={zoom}
        onLoad={map => mapRef.current = map} // Store the map object in ref once loaded
        onZoomChanged={handleZoomChanged}
      />
    </LoadScript>
  );
}

export default MapComponent;