'use client'

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem
} from '@admin/components/ui/sidebar'
import { SidebarNavLink } from './admin-sidebar-nav-link'

const settingsNav = [
  {
    label: 'Settings',
    items: [
      { label: 'General', href: '/admin/settings', exact: true },
      { label: 'Audit logs', href: '/admin/settings/audit-log', exact: true },
      {
        label: 'Forms',
        href: '/admin/settings/forms',
        exact: true
      },
      {
        label: 'Webhooks',
        href: '/admin/settings/webhooks',
        exact: true
      },
      {
        label: 'Deliveries',
        href: '/admin/settings/webhooks/logs',
        exact: true
      }
    ]
  }
]

export function AdminSettingsSidebar() {
  return (
    <Sidebar
      collapsible="none"
      className="h-full w-(--sidebar-width) shrink-0 border-r border-border/80 pt-14"
    >
      <SidebarContent className="gap-0 py-2">
        {settingsNav.map((item) => (
          <SidebarGroup key={item.label} className="gap-1.5">
            <SidebarGroupLabel>{item.label}</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu className="gap-px">
                {item.items.map((item) => (
                  <SidebarMenuItem key={item.href}>
                    <SidebarNavLink href={item.href} exact={item.exact}>
                      <span>{item.label}</span>
                    </SidebarNavLink>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
    </Sidebar>
  )
}