import { useEffect } from 'react';
import { useMap } from '@vis.gl/react-maplibre';

interface FlyToControllerProps {
  target?: { lng: number; lat: number; zoom?: number } | null;
  /** 이동 애니메이션 시간(ms). 기본: 1000 */
  duration?: number;
}

/** 지도 특정 좌표로 flyTo 트리거 컴포넌트.
 *  target이 바뀔 때마다 flyTo를 실행한다.
 *  반드시 <Map> 자식으로 사용해야 한다. */
export function FlyToController({ target, duration = 1000 }: FlyToControllerProps) {
  const { current: map } = useMap();

  useEffect(() => {
    if (!map || !target) return;
    map.flyTo({
      center: [target.lng, target.lat],
      zoom: target.zoom ?? 10,
      duration,
    });
  }, [target, map, duration]);

  return null;
}