<template>
  <UPage>
    <UHeader
      :ui="{
        left: 'flex items-center gap-1.5',
        center: 'hidden lg:flex lg:flex-4',
        right: 'flex items-center justify-end gap-1.5',
      }"
    >
      <template #title> Tootaio Studio </template>
      <template #default>
        <UNavigationMenu
          :items="navLinks"
          variant="link"
          class="w-full justify-center"
        />
      </template>
      <template #body>
        <UNavigationMenu :items="navLinks" orientation="vertical" />
      </template>
      <template #right>
        <UColorModeButton />
        <UButton
          icon="twemoji:flag-china"
          :variant="$i18n.locale == 'zh-CN' ? 'outline' : 'ghost'"
          class="cursor-pointer"
          color="neutral"
          :disabled="$i18n.locale == 'zh-CN'"
          @click="setLocale('zh-CN')"
        />
        <UButton
          icon="twemoji:flag-united-states"
          :variant="$i18n.locale == 'en' ? 'outline' : 'ghost'"
          class="cursor-pointer"
          color="neutral"
          :disabled="$i18n.locale == 'en'"
          @click="setLocale('en')"
        />
      </template>
    </UHeader>
    <UMain>
      <slot />
    </UMain>
    <UFooter>
      <template #left>
        &copy; {{ new Date().getFullYear() }} Tootaio Studio. All rights
        reserved.
      </template>
    </UFooter>
  </UPage>
</template>

<script lang="ts" setup>
const { setLocale } = useI18n();
const navLinks = useNavLinks();
</script>

<style></style>
