<template>
  <UPage>
    <UHeader>
      <template #title> Tootaio Studio </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();
</script>

<style></style>
