<script setup>
import { ScaleControl } from "mapbox-gl";
import { inject, onMounted, onUnmounted, ref, useMapbox } from "#imports";
const props = defineProps({
  options: { type: Object, required: false, default: () => ({}) },
  position: { type: String, required: false, default: () => "top-right" }
});
const mapId = inject("MapID");
if (!mapId) throw "Mapbox Controls must be placed inside a Map component";
const controlRef = ref();
useMapbox(mapId, (map) => {
  const control = new ScaleControl(props.options);
  controlRef.value = control;
  map.addControl(control, props.position);
});
onUnmounted(() => {
  useMapbox(mapId, (map) => {
    if (controlRef.value) map.removeControl(controlRef.value);
  });
});
</script>

<template>
  <div>
    <slot />
  </div>
</template>
