// components/VendorMap.tsx
import React, { FC, useMemo } from 'react';
import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';
import { CircularProgress, Box, Typography } from '@mui/material';

interface VendorMapProps {
  latitude: number;
  longitude: number;
  vendorName: string;
}

const mapContainerStyle = {
  width: '100%',
  height: '400px', // You can adjust this height as needed
};

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

const VendorMap: FC<VendorMapProps> = ({ latitude, longitude, vendorName }) => {
  const { isLoaded, loadError } = useLoadScript({
    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,
  }), [latitude, longitude]);

  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 (
    <GoogleMap
      mapContainerStyle={mapContainerStyle}
      center={center}
      zoom={15} // Adjust zoom level as needed
    >
      <Marker position={center} title={vendorName} />
    </GoogleMap>
  );
};

export default VendorMap;