import React, { useEffect, useRef } from "react";
// @ts-ignore
import jsVectorMap from "jsvectormap";
import "jsvectormap/dist/jsvectormap.css";
// @ts-ignore
import "jsvectormap/dist/maps/world";

interface CountryMapProps {
  mapColor?: string;
}

const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mapRef.current) return;

    // Initialize the map
    new jsVectorMap({
      selector: mapRef.current,
      map: "world",
      backgroundColor: "transparent",
      markersSelectable: true,
      markers: [
        { name: "United States", coords: [37.2580397, -104.657039], style: { fill: "#465FFF", stroke: "white", strokeWidth: 1 } },
        { name: "India", coords: [20.7504374, 73.7276105], style: { fill: "#465FFF", stroke: "white", strokeWidth: 1 } },
        { name: "United Kingdom", coords: [53.613, -11.6368], style: { fill: "#465FFF", stroke: "white", strokeWidth: 1 } },
        { name: "Sweden", coords: [-25.0304388, 115.2092761], style: { fill: "#465FFF", stroke: "white", strokeWidth: 1, strokeOpacity: 0 } },
      ],
      markerStyle: {
        initial: { fill: "#465FFF", r: 4 },
      },
      zoomOnScroll: false,
      zoomButtons: false,
      zoomMax: 12,
      zoomMin: 1,
      zoomAnimate: true,
      zoomStep: 1.5,
      regionStyle: {
        initial: {
          fill: mapColor || "#D0D5DD",
          fillOpacity: 1,
          fontFamily: "Outfit",
          stroke: "none",
          strokeWidth: 0,
          strokeOpacity: 0,
        },
        hover: {
          fillOpacity: 0.7,
          cursor: "pointer",
          fill: "#465fff",
          stroke: "none",
        },
        selected: {
          fill: "#465FFF",
        },
      },
    });

    return () => {
      // Cleanup
      if (mapRef.current) {
        mapRef.current.innerHTML = "";
      }
    };
  }, [mapColor]);

  return <div ref={mapRef} style={{ width: "100%", height: "100%", position: "relative" }} />;
};

export default CountryMap;