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-bg-surface border border-stroke rounded-sm shadow-md text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg 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-caption bg-bg-base text-fg border border-stroke rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20">
              {tooltip}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
