<template>
  <div class="unit-toggle">
    <button
      v-for="unit in units"
      :key="unit"
      type="button"
      :class="{ active: modelValue === unit }"
      @click="$emit('update:modelValue', unit)"
    >
      {{ unit }}
    </button>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  },
  units: {
    type: Array,
    default: () => ['mm', 'px']
  }
});

defineEmits(['update:modelValue']);
</script>
