<template>
  <div class="flag-container">
    <tooltip v-if="tooltipText != null" :text="tooltipText"><img :src="path" :alt="iso" :class="flagSizeClass"></tooltip>
    <img v-else :src="path" :alt="iso" :class="flagSizeClass">
  </div>
</template>

<script>
import Tooltip from "@/components/UI/Tooltip.vue";

export default {
  components: {Tooltip},
  props: {
    tooltipText: {
      type: String,
      default: null,
    },
    iso: {
      type: String,
      required: true
    },
    size: {
      type: String,
      required: false,
      default: 'm',
      validator: (value) => ['s', 'm', 'l', 'xl'].includes(value)
    }
  },
  name: "Flag",
  computed: {
    path() {
      return `/assets/flags/${this.iso}.svg`;
    },
    flagSizeClass() {
      return `flag-${this.size}`;
    }
  }
}
</script>

<style scoped>

.flag-container img {
  filter: saturate(0.9) brightness(0.95) hue-rotate(-10deg);
}

.flag-container {
  display: flex;
  align-items: center;
}

.flag-s {
  height: 1.2rem; /* 12px */
}

.flag-m {
  height: 1.6rem; /* 16px */
}

.flag-l {
  height: 2.4rem; /* 24px */
}

.flag-xl {
  height: 3.2rem; /* 32px */
}
</style>