import { View } from '@tarojs/components'
import Icon from '@/components/ui/Icon'
import './index.scss'

interface MapControlsProps {
  onRefresh?: () => void
  onZoomIn?: () => void
  onZoomOut?: () => void
  onLocate?: () => void
}

export function MapControls({ onRefresh, onZoomIn, onZoomOut, onLocate }: MapControlsProps) {
  return (
    <View className='map-controls'>
      <View className='map-controls__btn' onClick={onRefresh}>
        <Icon name='refresh' size={18} />
      </View>
      <View className='map-controls__stack'>
        <View className='map-controls__btn' onClick={onZoomIn}>
          <Icon name='plus' size={18} />
        </View>
        <View className='map-controls__btn' onClick={onZoomOut}>
          <Icon name='minus' size={18} />
        </View>
        <View className='map-controls__btn' onClick={onLocate}>
          <Icon name='target' size={18} />
        </View>
      </View>
    </View>
  )
}

export default MapControls
