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

interface WeatherMapControlsProps {
  center: [number, number]
  zoom: number
}

export function WeatherMapControls({ center, zoom }: WeatherMapControlsProps) {
  const { current: map } = useMap()

  const buttons = [
    {
      label: '+',
      tooltip: '확대',
      onClick: () => map?.zoomIn(),
    },
    {
      label: '−',
      tooltip: '축소',
      onClick: () => map?.zoomOut(),
    },
    {
      label: '🎯',
      tooltip: '한국 해역 초기화',
      onClick: () => map?.flyTo({ center, zoom, duration: 1000 }),
    },
  ]

  return (
    <div className="absolute top-4 right-4 z-10">
      <div className="flex flex-col gap-2">
        {buttons.map(({ label, tooltip, onClick }) => (
          <div key={tooltip} className="relative group">
            <button
              onClick={onClick}
              className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-base"
            >
              {label}
            </button>
            <div className="absolute right-full top-1/2 -translate-y-1/2 mr-2 px-2 py-1 text-xs bg-bg-0 text-text-1 border border-border rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20">
              {tooltip}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}