<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { getIcon } from '@scripts/icons';

export default {
	components: {
		FontAwesomeIcon
	},
	props: {
		icon: String,
		width: String,
		size: String,
		classes: String,
		title: String,
		text: String,
		margin: String,
		textClasses: String,
		transform: String
	},
	computed: {
		iconClassNames() {
			return [
				'spot-icon',
				this.icon,
				...(this.classes || '').split(/\s+/),
				this.margin?'margin-'+this.margin:null
			].filter(Boolean).join(' ');
		},
		resolvedFixedWidth() {
			return (this.width == 'fixed') || null;
		},
		resolvedAutoWidth() {
			return (this.width == 'auto') || null;
		},
		hasText() {
			return this.text && this.text != '';
		},
		iconDefinition() {
			return getIcon(this.icon);
		},
		resolvedSize() {
			return this.size || null;
		},
		resolvedTransform() {
			return this.transform || null;
		}
	}
}
</script>

<template>
	<span :title="title" :class="hasText?'spot-icon-with-text':null">
		<span class="spot-icon-symbol">
			<FontAwesomeIcon
				:icon="iconDefinition"
				:class="['spot-icon', this.icon, this.classes, this.margin?'margin-'+this.margin:null]"
				:fixed-width="resolvedFixedWidth"
				:width-auto="resolvedAutoWidth"
				:size="resolvedSize"
				:transform="resolvedTransform"
			/>
		</span>
		<span v-if="hasText" :class="['spot-icon-text', textClasses]">{{ text }}</span>
	</span>
</template>

<style lang="scss">
@use "@styles/var";

.spot-icon-with-text {
	display: inline-flex;
	align-items: flex-start;
	gap: var.$text-spacing;

	.spot-icon-symbol {
		flex: 0 0 auto;
		align-self: center;
	}

	.spot-icon-text {
		flex: 1 1 auto;
		min-width: 0;
		align-self: center;
	}
}

.spot-icon {
	&.margin-right {
		margin-right: var.$text-spacing;
	}

	&.margin-left {
		margin-left: var.$text-spacing;
	}
}
</style>