"use client";

import { Marker } from "@vis.gl/react-google-maps";
import { MapMarkerProps } from "./types";

export default function MapMarker({
  place,
  onMarkerClick,
  iconSize = 40,
}: MapMarkerProps) {
  const greenPinSvg =
    "data:image/svg+xml;charset=UTF-8," +
    encodeURIComponent(`
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#27AE60" viewBox="0 0 24 24">
        <path d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5
          c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5
          2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
      </svg>
    `);

  return (
    <Marker
      position={place.position}
      title={place.title}
      onClick={() => onMarkerClick(place)}
      icon={{
        url: greenPinSvg,
        scaledSize: new google.maps.Size(iconSize, iconSize),
        anchor: new google.maps.Point(iconSize / 2, iconSize),
      }}
    />
  );
}