<template>
  <UApp>
    <div class="min-h-screen bg-default text-default flex flex-col">
      <header class="border-b border-default">
        <UContainer class="h-14 flex items-center justify-between">
          <div class="flex items-center gap-2">
            <NuxtLink to="/" class="font-semibold tracking-tight">
              Nuxt4 Demo
            </NuxtLink>
            <UDropdownMenu :items="menuItems" :content="{ align: 'end' }">
              <UButton color="neutral" variant="ghost" label="菜单" icon="i-lucide-menu" />
            </UDropdownMenu>
          </div>
          <div>
            <UButton color="neutral" variant="ghost" label="登录 / 注册" to="/register" />
          </div>
        </UContainer>
      </header>

      <main class="flex-1">
        <UContainer class="py-8">
          <NuxtPage />
        </UContainer>
      </main>

      <footer class="border-t border-default">
        <UContainer class="h-12 flex items-center text-sm text-muted">
          Built with Nuxt + Nuxt UI
        </UContainer>
      </footer>
    </div>
  </UApp>
</template>

<script setup lang="ts">
const menuItems = [
  [
    {
      label: "首页",
      icon: "i-lucide-house",
      to: "/",
    },
    {
      label: "文档",
      icon: "i-lucide-book-open",
      children: [
        {
          label: "Nuxt",
          to: "https://nuxt.com/docs",
          target: "_blank",
        },
        {
          label: "Nuxt UI",
          to: "https://ui.nuxt.com/getting-started",
          target: "_blank",
        },
      ],
    },
    {
      label: "示例",
      icon: "i-lucide-layout-grid",
      children: [
        {
          label: "Hello API",
          to: "/api/hello",
          target: "_blank",
        },
        {
          label: "首页页面",
          to: "/index",
        },
      ],
    },
  ],
]
</script>