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

interface Props {
  layers: Layer[];
  overlayRef?: MutableRefObject<MapboxOverlay | null>;
}

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