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

const { locale } = useI18n();

function set(l: AppLocale): void {
  setLocale(l);
}
</script>

<template>
  <div
    role="group"
    aria-label="Language"
    class="flex items-center overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950/40"
  >
    <button
      type="button"
      :aria-pressed="locale === 'en'"
      class="cursor-pointer border-none px-[11px] py-1.5 font-mono text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-emerald-500/70"
      :class="locale === 'en' ? 'bg-zinc-800 text-emerald-400' : 'bg-transparent text-zinc-500'"
      @click="set('en')"
    >
      EN
    </button>
    <button
      type="button"
      :aria-pressed="locale === 'fr'"
      class="cursor-pointer border-none px-[11px] py-1.5 font-mono text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-emerald-500/70"
      :class="locale === 'fr' ? 'bg-zinc-800 text-emerald-400' : 'bg-transparent text-zinc-500'"
      @click="set('fr')"
    >
      FR
    </button>
  </div>
</template>
