<script setup lang="ts">
import { type TabItem } from './type'

const props = defineProps<{
  initialActiveTab: string
  data: TabItem[]
}>()

const activeTab = ref(props.initialActiveTab)
const emit = defineEmits<{
  changeTab: [value: string]
}>()

function changeTab(value: string) {
  activeTab.value = value
  emit('changeTab', value)
}
</script>

<template>
  <!-- Tabs -->
  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
    <Button
      v-for="tab in data"
      :key="tab.value"
      :data-active="activeTab === tab.value"
      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
      @click="changeTab(tab.value)"
    >
      {{ tab.label }}
    </Button>
  </div>

  <!-- Active Tab Content -->
  <div class="mt-4 rounded-md border p-4">
    <component
      :is="data.find((t) => t.value === activeTab)?.component"
      v-bind="data.find((t) => t.value === activeTab)?.props"
    />
    <!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
    <!-- :is="data.find((t) => t.value === activeTab)?.component" -->
    <!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
    <!-- :label="data.find((t) => t.value === activeTab)?.label" -->
  </div>
</template>
