<template>
  <div class="whatsapp-shell min-h-screen text-[var(--wa-text)]">
    <UDashboardGroup storage-key="whatsapp-dashboard" class="h-full">
      <AppSidebar />

      <UDashboardPanel class="bg-transparent">
        <template #header>
          <div class="flex flex-col gap-4 px-4 py-4 lg:px-6">
            <UDashboardNavbar :title="pageTitle" :icon="pageIcon" toggle-side="left">
              <template #leading>
                <UDashboardSidebarCollapse variant="subtle" />
              </template>
              <template #toggle>
                <UDashboardSidebarToggle variant="subtle" />
              </template>
              <template #trailing>
                <ConnectionStatus />
                <UserMenu />
              </template>
            </UDashboardNavbar>
          </div>
        </template>

        <template #body>
          <div class="px-4 pb-10 lg:px-8">
            <slot />
          </div>
        </template>
      </UDashboardPanel>
    </UDashboardGroup>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()

const pageTitle = computed(() => (route.meta.title as string) || 'WhatsApp Nucleo')
const pageIcon = computed(() => (route.meta.icon as string) || 'i-lucide-message-circle')
</script>
