<template>
	<div>
		<select
			class="form-select"
			:aria-label="$t('lang')"
			@change="saveLocale($event)"
			v-model="activeLang">
			<option
				v-for="lang in $i18n.locales"
				:key="lang.code"
				:value="lang.code"
				:selected="lang.code === activeLang">
				{{ lang.name }}
			</option>
		</select>
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeLang: "en"
		}
	},
	methods: {
		saveLocale(e) {
			// this.$i18n.locale = e.target.value
			this.$i18n.setLocale(e.target.value)
			// this.$i18n.setLocaleCookie(e.target.value)
			// this.$router.push(this.switchLocalePath(e.target.value))
			// this.$router.replace(this.switchLocalePath(e))
		}
	},
	mounted() {
		this.activeLang = this.$i18n.locale
	}
}
</script>