<script lang="ts" setup>
const { locale, locales } = useI18n();
const switchLocalePath = useSwitchLocalePath();
const mobileMenuOpen = useMobileMenuState();

const availableLocales = computed(() => {
  return locales.value.filter((i) => i.code !== locale.value);
});
</script>

<template>
  <div class="flex gap-2">
    <Button
      v-for="localeOption in availableLocales"
      :key="localeOption.code"
      class="p-2"
      variant="ghost"
      size="default"
      as-child
    >
      <NuxtLink
        :to="switchLocalePath(localeOption.code)"
        @click="mobileMenuOpen = false"
      >
        {{ localeOption.name || localeOption.code.toUpperCase() }}
      </NuxtLink>
    </Button>
  </div>
</template>
