<template>
  <div class="icon-container w-max">
    <img v-if="lang === 'fr'" :width="width" :height="height" src="@/assets/img/flag-fr.svg" :alt="`${[$i18n.locale]} flag icon`"/>
    <img v-if="lang === 'en'" :width="width" :height="height" src="@/assets/img/flag-uk.svg" :alt="`${[$i18n.locale]} flag icon`"/>
  </div>
</template>

<script>
import BaseIcon from './BaseIcon'
/**
 * I18nFlag icon
 */
export default {
  name: 'I18nFlagIcon',
  extends: BaseIcon,
  props: {
    /**
     * lang
     */
    lang: {
      type: String,
      default () {
        return this.CONFIG.I18N.FALLBACK_LOCALE
      }
    }
  }
}
</script>
