<template>
  <UiButton
    :class="cn.b()"
    :type="active ? 'filled' : 'ghost'"
    :color="active ? 'primary' : 'secondary'"
    :icon="icon"
    :size="size"
    @click="tabs.handleOptionClick(value)"
  >
    <template v-if="label">
      {{ label }}
    </template>
  </UiButton>
</template>

<script setup lang="ts">
import type { OptionProps } from './types.js'
import { tabsContextKey } from './constants'

const props = defineProps<OptionProps>()

const tabs = inject(tabsContextKey)!

const cn = useClassname('ui-tabs-option')

const active = computed(() => tabs.modelValue.value === props.value)
</script>
