<script lang="ts" setup>
import type { CountryCode } from 'libphonenumber-js'
import { computed } from 'vue'

interface FlagProps {
	country: CountryCode
	size?: number | string
	circle?: boolean
	square?: boolean
}
const props = defineProps<FlagProps>()

const fis = computed(() => {
	if (props.circle || props.square) { return true }
	return false
})
const height = computed(() => `${props.size ?? 1}rem`)

const backgroundImage = computed(() => {
	let country = props.country.toLowerCase()
	if (country === 'ac') { country = 'sh-ac' }
	const baseURL = 'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/flags'
	if (fis.value) { return `url(${baseURL}/1x1/${country.toLowerCase()}.svg)` }
	return `url(${baseURL}/4x3/${country.toLowerCase()}.svg)`
})
</script>

<template>
	<span
		class="fi"
		:style="{ height, backgroundImage }"
		:class="{ fis, circle }"
	/>
</template>

<style scoped>
 .fi{
	background-size:contain;
	background-position:50%;
	background-repeat:no-repeat;
	display: inline-block;
	aspect-ratio: 4/3;
	background-image:url(https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/flags/4x3/xx.svg);
}
.fi.circle {
	border-radius: 100%;
	overflow: hidden;
}
.fi.fis {
	aspect-ratio: 1;
	background-image: url(https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/flags/1x1/xx.svg)
}
.fi:before{ content:" " }
</style>
