<template>
	<text class="fa-icon" :class="fontClass" :style="iconStyle">{{ iconChar }}</text>
</template>

<script setup>
import { computed } from 'vue'
import { FA_ICONS } from '@/utils/fa-icons.js'

const props = defineProps({
	name: {
		type: String,
		required: true
	},
	type: {
		type: String,
		default: 'solid'
	},
	color: {
		type: String,
		default: 'inherit'
	},
	size: {
		type: [Number, String],
		default: 16
	}
})

const iconChar = computed(() => FA_ICONS[props.name] || '')

const fontClass = computed(() =>
	props.type === 'brands' ? 'fa-font-brands' : 'fa-font-solid'
)

const iconStyle = computed(() => ({
	color: props.color,
	fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
	lineHeight: 1
}))
</script>

<style scoped>
.fa-icon {
	display: inline-block;
	font-style: normal;
	vertical-align: middle;
}
</style>

<style>
.fa-font-solid {
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	font-style: normal;
}

.fa-font-brands {
	font-family: 'Font Awesome 7 Brands';
	font-weight: 400;
	font-style: normal;
}
</style>
