'use client'

import {
  BookCopyIcon,
  CalendarClockIcon,
  DollarSign,
  GraduationCap,
  LayoutDashboard,
  ShieldUserIcon,
  UsersIcon
} from 'lucide-react'

import { NavMain } from '@/components/nav-main'
import { OrgSwitcher } from '@/components/org-switcher'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader
} from '@repo/ui/components/ui/sidebar'

const data = {
  navMain: [
    {
      title: 'Visão geral',
      url: '/main',
      icon: LayoutDashboard
    },
    {
      title: 'Histórico de compras',
      url: '/orders',
      icon: DollarSign
    },
    {
      title: 'Colaboradores',
      url: '/users',
      icon: UsersIcon
    },
    {
      title: 'Gestores',
      url: '/admins',
      icon: ShieldUserIcon
    }
    // {
    //   title: 'Webhooks',
    //   url: '/webhooks',
    //   icon: WebhookIcon
    // }
  ],
  navContent: [
    {
      title: 'Matrículas',
      url: '/enrollments',
      icon: GraduationCap
    },
    {
      title: 'Agendamentos',
      url: '/scheduled',
      icon: CalendarClockIcon
    },
    {
      title: 'Catálogo de cursos',
      url: '/courses',
      icon: BookCopyIcon
    }
  ]
}

export function AppSidebar({ orgs = [] }) {
  return (
    <Sidebar>
      <SidebarHeader className="p-4">
        <OrgSwitcher orgs={orgs} />
      </SidebarHeader>
      <SidebarContent className="px-2">
        <NavMain data={data} />
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  )
}