import { GoogleMarkerProps } from "../../types";
import React from "react";
import { poiIcons } from "~/constants/pois";

export const GoogleMarker = ({ type }: GoogleMarkerProps) => {
  const Icon = poiIcons[type];

  return (
    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="gradient" gradientTransform="rotate(90)">
          <stop offset="20%" style={{ stopColor: "#0d9488" }} />
          <stop offset="80%" style={{ stopColor: "#0f766e" }} />
        </linearGradient>
      </defs>
      <circle
        cx="9"
        cy="9"
        r="6"
        stroke="white"
        strokeWidth="1.5"
        fill="url(#gradient)"
      />
      <svg fill="white" width="7" height="7" x="5.5" y="5.5">
        <Icon />
      </svg>
    </svg>
  );
};