<template>
  <UTabs :items="tabItems" class="w-full" :unmount-on-hide="false" variant="link">
    <template v-for="item in tabItems" #[item.slot]="{ item: slotItem }">
      <div class="mt-4">
        <component :is="getSlotContent(slotItem)" />
      </div>
    </template>
  </UTabs>
</template>

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

const slots = useSlots()

const slotContents = ref<Record<string, any>>({})

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}`

      slotContents.value[slotName] = slot

      return {
        label,
        icon,
        slot: slotName
      } satisfies TabsItem
    })
})

function getSlotContent(item: TabsItem) {
  if (!item.slot) return null
  return slotContents.value[item.slot]
}
</script>