<template>
  <div class="locale-changer">
    <img
      :class="['flag-icon', { active: locale === 'ru' }]"
      @click="setLocale('ru')"
      :src="ruIcon"
      alt="Русский"
      title="Русский"
    />
    <img
      :class="['flag-icon', { active: locale === 'en' }]"
      @click="setLocale('en')"
      :src="enIcon"
      alt="English"
      title="English"
    />
  </div>
</template>

<script>
import ruIcon from '@/assets/ru.svg'
import enIcon from '@/assets/en.svg'

export default {
  name: 'locale-changer',
  data () {
    return {
      locale: localStorage.getItem('locale') || 'ru',
      ruIcon,
      enIcon
    }
  },
  watch: {
    locale (val) {
      this.$root.$i18n.locale = val
      localStorage.setItem('locale', val)
    }
  },
  mounted () {
    localStorage.setItem('locale', this.locale)
  },
  methods: {
    setLocale (lang) {
      this.locale = lang
    }
  }
}
</script>

<style scoped>
.flag-icon {
  width: 32px;
  height: 24px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  margin: 4px;
  transition: opacity 0.2s;
  border: 1px solid #000000; /* 1px black border as outline */
}
.flag-icon.active {
  opacity: 1;
}
</style>
