<script lang="ts" setup>
import type { LucideIcon } from 'lucide-vue-next'
import type { RouteLocationRaw } from 'vue-router'
import type { SidebarProps } from '~/components/ui/sidebar'

export interface SidebarNavItem {
  title: string
  url?: string | RouteLocationRaw
  icon: LucideIcon | string
  isActive?: boolean
  isExternal?: boolean
  items?: {
    title: string
    url: string
  }[]
}

export interface SidebarNavGroup {
  label?: string
  items: SidebarNavItem[]
}

const props = withDefaults(
  defineProps<
    SidebarProps & {
      nav: SidebarNavGroup[]
    }
  >(),
  {
    collapsible: 'offcanvas',
    variant: 'sidebar',
  },
)

const loginState = useLoginState()
</script>

<template>
  <Sidebar v-bind="props">
    <SidebarHeader>
      <div
        class="flex h-12 justify-center items-center gap-2 rounded truncate group-has-[[data-collapsible=icon]]/sidebar-wrapper:justify-start transition-all duration-200 ease-in-out"
      >
        <img
          src="/images/xsh_logo.png"
          alt="Logo"
          class="w-9 max-w-9 aspect-square group-has-[[data-collapsible=icon]]/sidebar-wrapper:w-full transition-all duration-200 ease-in-out"
        />
        <h1 class="text-lg font-medium">智课教学平台</h1>
      </div>
    </SidebarHeader>
    <SidebarContent>
      <slot name="extra-header" />
      <AppSidebarNavMain :nav="nav" />
    </SidebarContent>
    <SidebarFooter>
      <AppSidebarNavUser :user="loginState.user" />
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
</template>

<style scoped></style>