<template>
  <div :class="cn.b()">
    <UiTabsOption
      v-for="(option, index) in options"
      :key="index"
      :size="size"
      v-bind="option"
    />
  </div>
</template>

<script setup lang="ts">
import UiTabsOption from './option.vue'
import type { ModelValue, Props } from './types'
import { tabsContextKey } from './constants'

defineOptions({
  name: 'UiTabs',
})

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [state: ModelValue]
}>()

const cn = useClassname('ui-tabs')

function handleOptionClick(value: ModelValue) {
  emit('update:modelValue', value)
}

provide(tabsContextKey, {
  modelValue: toRef(props, 'modelValue'),
  handleOptionClick,
})
</script>

<style lang="scss">
@use 'styles';
</style>
