<template>
  <div class="flex items-center gap-2">
    <span class="text-sm text-gray-600">Mode:</span>
    <UButtonGroup>
      <UButton
        :variant="modelValue === 'minimum' ? 'solid' : 'ghost'"
        color="gray"
        size="xs"
        @click="$emit('update:modelValue', 'minimum')"
      >
        Min Mode
      </UButton>
      <UButton
        :variant="modelValue === 'target' ? 'solid' : 'ghost'" 
        color="primary"
        size="xs"
        @click="$emit('update:modelValue', 'target')"
      >
        Target Mode
      </UButton>
    </UButtonGroup>
  </div>
</template>

<script setup lang="ts">
interface Props {
  modelValue: 'minimum' | 'target'
}

interface Emits {
  (e: 'update:modelValue', value: 'minimum' | 'target'): void
}

defineProps<Props>()
defineEmits<Emits>()
</script>