'use client'

import {
  NavigationControl,
  FullscreenControl,
  GeolocateControl,
  ScaleControl,
} from 'react-map-gl/maplibre'

type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

export interface MapControlsProps {
  position?: ControlPosition
  showNavigation?: boolean
  showFullscreen?: boolean
  showGeolocate?: boolean
  showScale?: boolean
  scaleUnit?: 'imperial' | 'metric' | 'nautical'
}

export function MapControls({
  position = 'top-right',
  showNavigation = true,
  showFullscreen = false,
  showGeolocate = false,
  showScale = false,
  scaleUnit = 'metric',
}: MapControlsProps) {
  return (
    <>
      {showNavigation && (
        <NavigationControl position={position} showCompass showZoom />
      )}
      {showFullscreen && <FullscreenControl position={position} />}
      {showGeolocate && (
        <GeolocateControl
          position={position}
          trackUserLocation
        />
      )}
      {showScale && <ScaleControl unit={scaleUnit} />}
    </>
  )
}
