<template>
  <UTabs :items="tabItems" :default-index="0" class="w-full">
    <template v-for="(item, index) in tabItems" :key="index" #[item.slot] #content="{ index }" >
      <div class="mt-4">
        <slot :name="item.slot" />
      </div>
    </template>
  </UTabs>
</template>

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const slots = useSlots()

// Process slots to create tab items
const tabItems = computed(() => {
  const defaultSlots = slots.default?.() || []
  
  return defaultSlots
    .filter(slot => slot.type === 'div' && slot.props)
    .map((slot, index) => {
      const label = slot.props?.label || `Tab ${index + 1}`
      const icon = slot.props?.icon
      const slotName = `tab-${index}` as const
      
      return {
        label,
        icon,
        slot: slotName
      } satisfies TabsItem
    })
})
</script>
  