<template>
  <div class="row no-wrap kettalComponent">
    <q-btn
      v-for="button in options"
      :key="button.value"
      :class="button.value === modelValue ? selectedButtonClasses : buttonClasses"
      unelevated
      :label="button.label"
      @click="() => {
        modelValue = button.value
        $emit('update:modelValue', button.value)
      }"
    />
  </div>
</template>
<script setup lang="ts">
import { KButtonToggleGroupProps } from './types'
const modelValue = defineModel('modelValue', { type: String })
defineEmits(['update:modelValue'])
withDefaults(defineProps<KButtonToggleGroupProps>(), ({
  buttonClasses: 'text-k-accent',
  selectedButtonClasses: 'text-k-accent border-bottom-k-accent'
}))
</script>
<style></style>
