<template>
    <div id="locale-switch">
      <button @click="setLocale('en')" :class="{ active: locale === 'en' }">en</button>
      <button @click="setLocale('fr')" :class="{ active: locale === 'fr' }">fr</button>
    </div>
</template>

<script setup>
const { locale, setLocale } = useI18n()
</script>

<style lang="scss" scoped>
@import '../assets/scss/_variables.scss';

.active {
    color: $brand-color;
    }
</style>