<template>
  <div>
    <nav class="tabs tabs-bordered mb-6 overflow-x-auto flex-nowrap" role="tablist" :aria-label="ariaLabel">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        type="button"
        class="tab"
        :class="{ 'tab-active': modelValue === tab.key }"
        role="tab"
        :aria-selected="modelValue === tab.key"
        @click="emit('update:modelValue', tab.key)"
      >
        {{ tab.label }}
        <span v-if="tab.count !== undefined && tab.count > 0" class="badge badge-outline badge-xs ml-1.5">
          {{ tab.count }}
        </span>
      </button>
    </nav>
    <div role="tabpanel">
      <slot :name="`tab-${modelValue}`" />
    </div>
  </div>
</template>

<script setup lang="ts">
export interface TabDefinition {
  key: string
  label: string
  count?: number
}

defineProps<{
  tabs: TabDefinition[]
  modelValue: string
  ariaLabel?: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>
