import React from 'react';
import { useMap } from 'react-leaflet';
import { useMapActions } from '@/contexts/MapContexts.tsx';
import { RotateCw, ZoomIn, ZoomOut } from 'lucide-react';
import Button from '@/components/ui/Button.tsx';

// Bugulma center coordinates [lat, lng] for Leaflet
const BUGULMA_CENTER: [number, number] = [54.5384152, 52.7955953];
const DEFAULT_ZOOM = 12;

const MapControls: React.FC = () => {
  const map = useMap();
  const { resetView } = useMapActions();

  const handleZoomIn = () => {
    map.zoomIn();
  };

  const handleZoomOut = () => {
    map.zoomOut();
  };

  const handleReset = () => {
    map.setView(BUGULMA_CENTER, DEFAULT_ZOOM, { animate: true });
    resetView();
  };

  return (
    <div className="absolute bottom-4 right-4 flex flex-col gap-2 z-50">
      <Button
        variant="outline"
        size="sm"
        onClick={handleZoomIn}
        className="h-10 w-10 p-0 shadow-md"
        aria-label="Zoom in"
      >
        <ZoomIn className="h-4 h-5 text-current w-4 w-5" />
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={handleZoomOut}
        className="h-10 w-10 p-0 shadow-md"
        aria-label="Zoom out"
      >
        <ZoomOut className="h-4 h-5 text-current w-4 w-5" />
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={handleReset}
        className="h-10 w-10 p-0 shadow-md"
        aria-label="Reset view"
      >
        <RotateCw className="h-4 h-5 text-current w-4 w-5" />
      </Button>
    </div>
  );
};

export default React.memo(MapControls);