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

    const { locale } = useI18n();
    const localeOptions = [
        { value: 'en-CA', label: 'English' },
        { value: 'fr-FR', label: 'Francais' },
    ];
</script>

<template>
    <div>
        <q-list dense class="row">
            <q-item v-for="option in localeOptions" 
                :key="option.value"
                tag="label"    
                v-ripple
            >
                <q-item-section avatar>
                    <q-radio v-model="locale" :val="option.value" />
                </q-item-section>
    
                <q-item-section>
                    <q-item-label>{{ option.label }}</q-item-label>
                </q-item-section>
            </q-item>
        </q-list>
    </div>
    <!-- <q-btn-dropdown push color="primary" :label="$t('shared.languageLabel')" icon="language">
        <q-list>
            <q-item clickable v-close-popup v-for="option in localeOptions" :key="option.value" @click="locale = option.value">
                <q-item-section>{{ option.label }}</q-item-section>
            </q-item>
        </q-list>
    </q-btn-dropdown> -->
</template>