import React from "react";
import { GoogleClusterMarkerProps } from "../../types";

export const GoogleClusterMarker = ({
  markerSize,
}: GoogleClusterMarkerProps) => (
  <svg viewBox="0 0 200 200" 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="100"
      cy="100"
      r={80}
      stroke="white"
      strokeWidth={`${(110 - markerSize) / 10}%`}
      fill="url(#gradient)"
    />
  </svg>
);