<template>
  <UApp>
    <UHeader>
      <template #left>
        <div class="text-2xl font-bold">Tootaio Studio</div>
      </template>

      <UNavigationMenu :items="items" />

      <template #right>
        <UColorModeButton />
      </template>
    </UHeader>

    <UMain>
      <slot />
    </UMain>

    <UFooter>
      <template #left>
        <p class="text-muted text-sm">
          Copyright &copy; 2021 - {{ new Date().getFullYear() }} Tootaio Studio.
          All Rights Reserved.
        </p>
      </template>

      <template #right>
        <UButton
          v-for="link in socialLink"
          :key="link.name"
          :icon="link.icon"
          color="neutral"
          variant="ghost"
          :to="link.link"
          target="_blank"
          :aria-label="link.name"
        />
      </template>
    </UFooter>
  </UApp>
</template>

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

const route = useRoute();

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: "宴会大屏展示",
    to: "/",
  },
  {
    label: "网展开发",
    to: "/web-design",
    active: route.path.startsWith("/web-design"),
  },
]);

const socialLink = [
  {
    name: "Blog Posts",
    icon: "lucide:globe",
    link: "https://xiaomai.tootaio.com",
  },
  {
    name: "Official Website",
    icon: "lucide:mouse-pointer-click",
    link: "https://tootaio.com",
  },
  {
    name: "GitHub",
    icon: "lucide:github",
    link: "https://github.com/kingsmai",
  },
];
</script>
