import { Source } from "react-map-gl";
import { BASE_URL } from "../../api.js";
import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter.js";
import { ConsumerLayer } from "./ConsumerLayer.jsx";
import { DispatcherLayer } from "./DispatcherLayer.jsx";
import { SourceLayer } from "./SourceLayer.jsx";

export const Points = () => {
  const { updateCounter } = useUpdateLayerCounter();

  return (
    <>
      <Source
        id="points"
        type="vector"
        key={`points-${updateCounter}`}
        tiles={[
          `${BASE_URL}/martin/public.data/{z}/{x}/{y}.pbf`,
        ]}
      >
        <SourceLayer />
        <ConsumerLayer />
        <DispatcherLayer />
      </Source>
    </>
  );
};
