import React, { useMemo } from 'react';
//import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';
import { APIProvider, Map, AdvancedMarker, Pin } from '@vis.gl/react-google-maps';

import { Box, CircularProgress, Typography } from '@mui/material';
import LocationOnIcon from '@mui/icons-material/LocationOn';

interface MapComponentProps {
    lat: number;
    lng: number;
    zoom?: number;
    address?: string; // Optional for display
}

const libraries: ('places' | 'drawing' | 'geometry' | 'localContext' | 'visualization')[] = ['places']; // 'places' is a common library to load

const MapComponent: React.FC<MapComponentProps> = ({ lat, lng, zoom = 15, address }) => {
    const latitude = Number(lat);
    const longitude = Number(lng);
    const defaultProps = {
        center: { latitude, longitude },
        zoom,
    };
    

    // Replace 'YOUR_Maps_API_KEY' with your actual API key

    // const { isLoaded, loadError } = useLoadScript({
    //     id: 'dta_demo',
    //     googleMapsApiKey: 'AIzaSyDJTApP1OoMbo7b1CPltPu8IObxe8UQt7w',//process.env.REACT_APP_Maps_API_KEY!, // Replace with your actual API key environment variable
    //     libraries: libraries,
    //   });

    const center = useMemo(() => ({
        lat: latitude,
        lng: longitude,
      }), [lat, lng]);
    
      // if (loadError) {
      //   return (
      //     <Box display="flex" justifyContent="center" alignItems="center" height="100%">
      //       <Typography color="error">Error loading maps</Typography>
      //     </Box>
      //   );
      // }
    
      // if (!isLoaded) {
      //   return (
      //     <Box display="flex" justifyContent="center" alignItems="center" height="100%">
      //       <CircularProgress />
      //     </Box>
      //   );
      // }
    return (
        <Box sx={{ height: 300, width: '100%', mt: 2, border: '1px solid #ccc' }}>
            {lat && lng && center? (
              <APIProvider apiKey={'AIzaSyDJTApP1OoMbo7b1CPltPu8IObxe8UQt7w'}>
                  <Map
                    mapId={"dta-demo"}
                      
                      defaultCenter={center}
                      zoom={defaultProps.zoom}
                      disableDefaultUI={true}
                  >
                      <AdvancedMarker position={center} />
                  </Map>
                </APIProvider>
            ) : (
                <Typography variant="body2" color="textSecondary" sx={{ p: 2 }}>
                    Map not available. Please ensure valid latitude and longitude.
                </Typography>
            )}
        </Box>
    );
};

export default MapComponent;