<template>
  <span
    :class="`flag-icon-${countryIsoCode.toLowerCase()}`"
    :style="flagStyle"
  />
</template>

<script>
export default {
  props: {
    countryIsoCode: {
      type: String,
      required: true,
      default: "ZA",
    },
    flagSize: {
      type: String,
      default: "xl",
      validator(value) {
        return ["xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl"].includes(
          value
        );
      },
    },
    flagRadius: {
      type: String,
      default: "sm",
      validator: function (value) {
        return (
          [
            "none",
            "sm",
            "base",
            "md",
            "lg",
            "xl",
            "2xl",
            "3xl",
            "full",
          ].indexOf(value) !== -1
        );
      },
    },
  },
  computed: {
    flagStyle() {
      return `
        height: var(--sizing-${this.flagSize});
        border-radius: var(--radius-${this.flagRadius});
        aspect-ratio: 4 / 3;
        background-size: cover;
        background-position: center;
      `
    } 
  }
};
</script>

<style src="flag-icon-css/css/flag-icons.min.css"></style>
