<template>
  <div role="tablist" class="tabs tabs-boxed">
    <button
      v-for="option in options"
      :key="option.value"
      type="button"
      role="tab"
      class="tab"
      :class="{ 'tab-active': modelValue === option.value }"
      @click="$emit('update:modelValue', option.value)"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
interface Option {
  value: string
  label: string
}

defineProps<{
  modelValue: string
  options: Option[]
}>()

defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()
</script>
