<script setup lang="ts">
import { TABS_INJECTION_KEY } from '~/injection-keys'
import { whenever } from '@vueuse/core'
import { inject, ref } from 'vue'

const { title, icon } = defineProps<{ title:string, icon?:string }>()

const { currentTab, tabs, icons } = inject(TABS_INJECTION_KEY, {
  currentTab: ref(title),
  tabs: [],
  icons: [],
})

whenever(() => !tabs.includes(title), () => {
  tabs.push(title)
  icons.push(icon)
}, { immediate: true })
</script>

<template>
	<div v-if="currentTab === title" class="tab-content">
    <slot />
  </div>
</template>
