<template>
  <select
    :value="locale"
    :aria-label="t('common.language')"
    class="rounded-md border border-zinc-700 bg-zinc-900 px-1.5 py-1 text-xs text-zinc-300 outline-none focus:border-zinc-400"
    @change="onChange"
  >
    <option value="en">EN</option>
    <option value="fr">FR</option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { setLocale, type AppLocale } from '../i18n';

const { locale, t } = useI18n({ useScope: 'global' });

function onChange(e: Event): void {
  setLocale((e.target as HTMLSelectElement).value as AppLocale);
}
</script>
