<script setup lang="ts">
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 id="sidebar-header" class="flex items-center gap-2 px-3 py-2">
        <img src="/Alpha.svg" alt="Alpha" class="h-7 w-auto dark:invert">
      </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>
