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

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

const activeMenu = ref(props.initialActiveMenu)
const emit = defineEmits<{
  changeMenu: [value: string]
}>()

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

<template>
  <div class="mt-4 flex gap-4">
    <!-- Menu Sidebar -->
    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
        <button
          v-for="menu in data"
          :key="menu.value"
          :data-active="activeMenu === menu.value"
          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
          @click="changeMenu(menu.value)"
        >
          {{ menu.label }}
        </button>
      </div>
    </div>

    <!-- Active Menu Content -->
    <div v-if="data.find((m) => m.value === activeMenu)?.component" class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
      <component
        :is="data.find((m) => m.value === activeMenu)?.component"
        v-bind="data.find((m) => m.value === activeMenu)?.props"
      />
    </div>
  </div>
</template>

