import {Points} from "./Points.jsx";
import {Layer, Source} from "react-map-gl";
import {aoLayer, rayonLayer} from "./layers-config.js";
import {BASE_URL} from "../../api.js";
import {SelectedRegion} from "../../Map/Layers/SelectedRegion.jsx";

export const Layers = () => {
  return (
    <>
      <Source
        id="ao"
        type="vector"
        tiles={[`${BASE_URL}/martin/public.service_ao/{z}/{x}/{y}.pbf`]}
      >
        <Layer
          {...aoLayer}
          layout={{
            ...aoLayer.layout,
          }}
        />
      </Source>

      <Source
        id="rayon"
        type="vector"
        tiles={[`${BASE_URL}/martin/public.service_rayon/{z}/{x}/{y}.pbf`]}
      >
        <Layer
          {...rayonLayer}
          layout={{
            ...rayonLayer.layout,
          }}
        />
      </Source>

      <SelectedRegion />

      <Points />
    </>
  );
};
