<template>
  <div class="flex items-center gap-1" role="group" :aria-label="$t('common.language')">
    <button
      v-for="loc in availableLocales"
      :key="loc.code"
      :aria-current="currentLocale === loc.code ? 'true' : undefined"
      :class="[
        'px-2 py-1 text-sm font-ui rounded transition-colors',
        currentLocale === loc.code
          ? 'text-sky-accent font-semibold'
          : 'text-sky-text/50 hover:text-sky-text',
      ]"
      @click="switchLocale(loc.code)"
    >
      {{ loc.code.toUpperCase() }}
    </button>
  </div>
</template>

<script setup lang="ts">
const { currentLocale, availableLocales, switchLocale } = useLocale()
</script>
