<script setup lang="ts">
import type { Component } from "vue"
import { useI18n } from "vue-i18n"
import {
  IconCirclePlusFilled,
  IconLayoutKanban,
  IconFolder,
  IconListDetails,
  IconChartBar,
  IconUsers,
  IconFileUpload,
  IconSettings,
} from "@tabler/icons-vue"

import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

const { t } = useI18n()

const mainNavItems = [
  { title: 'nav.board', icon: IconLayoutKanban, id: 'metrics' },
  { title: 'nav.projects', icon: IconFolder, id: 'projects' },
  { title: 'nav.transcriptions', icon: IconFileUpload, id: 'transcriptions' },
  { title: 'nav.lifecycle', icon: IconListDetails, id: 'lifecycle' },
  { title: 'nav.analytics', icon: IconChartBar, id: 'analytics' },
  { title: 'nav.team', icon: IconUsers, id: 'team' },
  { title: 'nav.settings', icon: IconSettings, id: 'settings' },
]

defineProps<{
  items?: { title: string; url: string; icon?: Component }[]
  activeTab?: string
}>()

const emit = defineEmits<{
  'update:activeTab': [value: string]
}>()
</script>

<template>
  <SidebarGroup>
    <SidebarGroupContent class="flex flex-col gap-2">
      <SidebarMenu>
        <SidebarMenuItem class="flex items-center gap-2">
          <SidebarMenuButton
            tooltip="Quick Create"
            class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
          >
            <IconCirclePlusFilled />
            <span>{{ t('nav.quickCreate') }}</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
      <SidebarMenu>
        <SidebarMenuItem v-for="item in mainNavItems" :key="item.id">
          <SidebarMenuButton
            :tooltip="t(item.title)"
            :is-active="activeTab === item.id"
            @click="emit('update:activeTab', item.id)"
          >
            <component :is="item.icon" v-if="item.icon" />
            <span>{{ t(item.title) }}</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroupContent>
  </SidebarGroup>
</template>
