<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const links = [[
  {
    label: 'General',
    icon: 'i-lucide-user',
    to: '/profile',
    exact: true,
  },
  {
    label: 'Security',
    icon: 'i-lucide-shield',
    to: '/profile/security',
  },
]] satisfies NavigationMenuItem[][]
</script>

<template>
  <UDashboardPanel id="profile" :ui="{ body: 'lg:py-12' }">
    <template #header>
      <UDashboardNavbar title="Profile">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <UNavigationMenu
          :items="links"
          highlight
          class="-mx-1 flex-1"
        />
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="mx-auto flex w-full max-w-2xl flex-col gap-4 sm:gap-6 lg:gap-12">
        <slot />
      </div>
    </template>
  </UDashboardPanel>
</template>
