<template>
  <UDashboardSidebar class="bg-[var(--wa-surface)] border-[var(--wa-border)]">
    <template #header>
      <div class="flex items-center gap-3 p-4">
        <div class="w-10 h-10 rounded-full bg-[var(--wa-green-dark)] flex items-center justify-center">
          <UIcon name="i-lucide-message-circle" class="w-6 h-6 text-white" />
        </div>
        <div class="flex flex-col">
          <span class="font-semibold text-[var(--wa-text)]">WhatsApp Nucleo</span>
          <span class="text-xs text-[var(--wa-text-muted)]">Multi-Instance Manager</span>
        </div>
      </div>
    </template>

    <template #body>
      <UDashboardSidebarContent>
        <UDashboardSidebarGroup>
          <UDashboardSidebarItem
            to="/"
            icon="i-lucide-layout-dashboard"
            label="Dashboard"
            exact
          />
          <UDashboardSidebarItem
            to="/instances"
            icon="i-lucide-smartphone"
            label="Instancias"
          />
          <UDashboardSidebarItem
            to="/messages"
            icon="i-lucide-message-square"
            label="Mensajes"
          />
        </UDashboardSidebarGroup>

        <UDashboardSidebarGroup label="Integraciones">
          <UDashboardSidebarItem
            to="/webhooks"
            icon="i-lucide-webhook"
            label="Webhooks"
          />
          <UDashboardSidebarItem
            to="/api-docs"
            icon="i-lucide-code"
            label="API Docs"
          />
        </UDashboardSidebarGroup>

        <UDashboardSidebarGroup label="Sistema">
          <UDashboardSidebarItem
            to="/settings"
            icon="i-lucide-settings"
            label="Configuracion"
          />
        </UDashboardSidebarGroup>
      </UDashboardSidebarContent>
    </template>
  </UDashboardSidebar>
</template>
