import { useControl } from '@vis.gl/react-maplibre';
import { MapboxOverlay } from '@deck.gl/mapbox';
import type { Layer } from '@deck.gl/core';

interface DeckGLOverlayProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  layers: Layer<any>[];
}

/** deck.gl 레이어를 MapLibre에 interleaved 방식으로 통합하는 공통 컴포넌트.
 *  반드시 <Map> 자식으로 사용해야 한다. */
export function DeckGLOverlay({ layers }: DeckGLOverlayProps) {
  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
  overlay.setProps({ layers });
  return null;
}