<script setup lang="ts">
import {
  IconChartBar,
  IconDashboard,
  IconDatabase,
  IconFileAi,
  IconFileDescription,
  IconFolder,
  IconListDetails,
  IconReport,
  IconSettings,
  IconUsers,
  IconInnerShadowTop,
} from "@tabler/icons-vue"

import NavDocuments from "@/components/dashboard/NavDocuments.vue"
import NavMain from "@/components/dashboard/NavMain.vue"
import NavSecondary from "@/components/dashboard/NavSecondary.vue"
import NavUser from "@/components/NavUser.vue"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
} from "@/components/ui/sidebar"

defineProps<{
  activeTab?: string
}>()

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

<template>
  <Sidebar collapsible="offcanvas">
    <SidebarHeader>
      <div class="flex items-center gap-2 px-3 py-2">
        <IconInnerShadowTop class="size-5" />
        <span class="text-base font-semibold">Alpha</span>
      </div>
    </SidebarHeader>
    <SidebarContent>
      <NavMain
        :active-tab="activeTab"
        @update:active-tab="emit('update:activeTab', $event)"
      />
      <NavDocuments
        :active-tab="activeTab"
        @update:active-tab="emit('update:activeTab', $event)"
      />
      <NavSecondary :items="[]" class="mt-auto" />
    </SidebarContent>
    <SidebarFooter>
      <NavUser />
    </SidebarFooter>
  </Sidebar>
</template>
