// Example
import { Cluster, ClusterStats, DefaultRenderer, Marker } from '@googlemaps/markerclusterer';

export class CustomRenderer extends DefaultRenderer {

  constructor() {
    super()
  }
  
  render({ count, position }: Cluster, stats: ClusterStats, map: google.maps.Map): Marker {
    const color =
      count > Math.max(10, stats.clusters.markers.mean)
        ? "#ff0000" // <-- Change the color here
        : "#0000ff";

    // create svg url with fill color
    const svg = window.btoa(`
    <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <circle cx="120" cy="120" opacity=".6" r="70" />
      <circle cx="120" cy="120" opacity=".3" r="90" />
      <circle cx="120" cy="120" opacity=".2" r="110" />
      <circle cx="120" cy="120" opacity=".1" r="130" />
    </svg>`);

    // create marker using svg icon
    return new google.maps.Marker({
      position,
      icon: {
        url: `data:image/svg+xml;base64,${svg}`,
        scaledSize: new google.maps.Size(45, 45),
      },
      label: {
        text: String(count),
        color: "rgba(255,255,255,0.9)",
        fontSize: "12px",
      },
      // adjust zIndex to be above other markers
      zIndex: 1000 + count,
    });
   }
}