'use client'

import React from 'react'
import { useMap } from '@/app/map-context'
import { Button } from '@/components/ui/button'
import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react'

export function MapControls() {
    const { zoomIn, zoomOut, reset } = useMap()

    return (
        <div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
            <Button
                size="sm"
                onClick={zoomIn}
                className="w-10 h-10 p-0"
            >
                <ZoomIn className="w-4 h-4" />
            </Button>

            <Button
                size="sm"
                onClick={zoomOut}
                className="w-10 h-10 p-0"
            >
                <ZoomOut className="w-4 h-4" />
            </Button>

            <Button
                size="sm"
                onClick={reset}
                className="w-10 h-10 p-0"
            >
                <RotateCcw className="w-4 h-4" />
            </Button>
        </div>
    )
}