'use client';

import { memo } from 'react';
import {
  APIProvider,
  Map as GoogleMap,
  AdvancedMarker
} from '@vis.gl/react-google-maps';
import marker from './img/marker.png';
import cn from '@/lib/merge-clsx';

const Map: React.FC<MapProps> = ({ latitude, longitude, zoom = 10 }) => {
  const position = { lat: latitude, lng: longitude };

  console.log(position);
  return (
    <div className="w-full h-full relative">
      <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''}>
        <GoogleMap
          mapId={'fd953d0c177625eb'}
          defaultCenter={position}
          defaultZoom={zoom}
          gestureHandling={'cooperative'}
          disableDefaultUI={true}>
          <AdvancedMarker position={position}>
            <div>
              <img src={marker.src} alt="marker" width={50} height={50} />
            </div>
          </AdvancedMarker>
        </GoogleMap>
      </APIProvider>
    </div>
  );
};

export default memo(Map);
