"use client";

import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.heat";
import { useEffect } from "react";

function HeatLayer() {
  const map = useMap();

  useEffect(() => {
    const puntos = [
      [20,30,3.5],[21,31,4.0],[22,32,5.2],[23,33,6.5],
      [24,34,7.0],[25,35,8.0],[26,36,6.8],[27,37,7.5],

      [40,50,4.5],[41,51,6.0],[42,52,8.0],[43,53,7.2],
      [44,54,6.5],[45,55,5.8],[46,56,7.1],

      [60,30,4.2],[61,31,5.4],[620,320,6.6],[630,330,7.8],
      [64,34,8.5],[65,35,7.2],[660,360,6.1],[670,370,5.3],

      [700,200,6.5],[720,220,7.8],[740,240,8.9],[760,260,9.5],
      [780,280,8.7],[800,300,7.6],[820,320,6.4]
    ];

    const heat = L.heatLayer(puntos, {
      radius: 50,
      blur: 30,
      maxZoom: 2,
      gradient:{
      
        0.4:"cyan",
        0.6:"yellow",
        0.8:"orange",
        1:"red"
      }
    });

    heat.addTo(map);

    return () => {
      map.removeLayer(heat);
    };
  }, [map]);

  return null;
}

export default function MapaCalor(){

  const bounds = [
    [0,0],
    [1000,1000]
  ];

  return(

    <div style={{
      width:"100%",
      height:"600px",
      marginTop:"40px",
      borderRadius:"10px",
      overflow:"hidden",
      boxShadow:"0 4px 20px rgba(0,0,0,0.2)"
    }}>

      <MapContainer
        crs={L.CRS.Simple}
        bounds={bounds}
        style={{height:"100%",width:"100%"}}
      >

        <ImageOverlay
          url="/plano_fes_acatlan.png"
          bounds={bounds}
        />

        <HeatLayer/>

      </MapContainer>

    </div>

  );
}