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

export type Props = {
  title: string,
  to?: RouterLinkProps['to']
  icon?: string
}

const props = defineProps<Props>()

const { currentTitle, tabs } = inject(TABS_INJECTION_KEY, {
  currentTitle: ref(props.title),
  tabs: [],
})

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

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