<template>
  <div class="flex items-center">
    <ul class="flex uppercase gap-4">
      <li v-for="(lang, i) in links" :key="i">
        <NuxtLink
          v-if="lang.enabled"
          :to="lang.to"
          class="hover:text-primary-500 block"
          :class="{
            'font-bold': lang.active,
          }"
        >
          {{ lang.code }}
        </NuxtLink>
        <div v-else class="cursor-not-allowed text-gray-300">
          {{ lang.code }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const links = useLanguageLinks()
</script>
