<script lang="ts" setup>
    import { useI18n } from 'vue-i18n';

    const { locale } = useI18n();
    const setLocale = (newLocale: string) => { locale.value = newLocale; };
    const localeOptions = [
        { value: 'en', label: 'English' },
        { value: 'fr', label: 'Francais' },
    ];
</script>

<template>
    <q-btn-dropdown flat :label=locale class="rounded-borders" icon="language">
        <q-list>
            <q-item clickable v-close-popup v-for="option in localeOptions" :key="option.value" @click="setLocale(option.value)">
                <q-item-section>{{ option.label }}</q-item-section>
            </q-item>
        </q-list>
    </q-btn-dropdown>
</template>