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

interface Props {
  layers: Layer[];
}

/**
 * MapLibre Map 내부에서 deck.gl 레이어를 GPU 렌더링하는 오버레이.
 * interleaved 모드: MapLibre 레이어와 deck.gl 레이어가 z-order로 혼합됨.
 */
export function DeckGLOverlay({ layers }: Props) {
  const overlay = useControl<MapboxOverlay>(
    () => new MapboxOverlay({
      interleaved: true,
      getCursor: ({ isHovering }) => isHovering ? 'pointer' : '',
    }),
  );
  overlay.setProps({ layers });
  return null;
}
