<script setup lang="ts">
const { t, availableLocales, locale } = useI18n()

function toggleLocales() {
  const locales = availableLocales
  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
}
</script>

<template>
  <v-footer app class="text-xl justify-center">
    <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
      <div class="i-carbon-campsite" />
    </RouterLink>

    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
      <div class="i-carbon-sun dark:i-carbon-moon" />
    </button>

    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales()">
      <div class="i-carbon-language" />
    </a>

    <RouterLink class="icon-btn mx-2" to="/about" :title="t('button.about')">
      <div class="i-carbon-dicom-overlay" />
    </RouterLink>

    <a class="icon-btn mx-2" rel="noreferrer" href="https://git.thehrz.net/thehrz/19yuke2-vue" target="_blank" title="Gitea">
      <div class="i-simple-icons-gitea" />
    </a>
  </v-footer>
</template>
