<script setup lang="ts">
import {
  CreditCard,
  Database,
  Grid,
  HelpCircle,
  Settings
} from "@lucide/vue"

import {
  Sidebar,
  SidebarContent,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'

const data = {
  user: {
    name: "shadcn",
    email: "m@example.com",
    avatar: "/avatars/shadcn.jpg",
  },
  navMain: [
    {
      title: "Dashboard",
      url: "/admin/dashboard",
      icon: Grid,
    },
    {
      title: "Jenis Bisnis",
      url: "/admin/business-types",
      icon: Grid,
    },
    {
      title: "Plans",
      url: "/admin/plans",
      icon: CreditCard,
    },
  ],
}
</script>

<template>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton as-child class="data-[slot=sidebar-menu-button]:p-1.5!">
            <a href="#">
              <Database class="size-6!" />
              <span class="text-lg font-semibold">Profitra</span>
            </a>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroupContent class="flex flex-col gap-2">
        <SidebarGroupLabel>Master</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
            <SidebarMenuButton as-child :tooltip="item.title">
              <NuxtLink :to="item.url">
                <component :is="item.icon" v-if="item.icon" />
                <span>{{ item.title }}</span>
              </NuxtLink>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarContent>
  </Sidebar>
</template>
