<script>
import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
import spotIcon from '@components/spotIcon';

export default {
	components: {
		FontAwesomeLayers,
		spotIcon
	},
	props: {
		mainClasses: String,
		iconMain: String,
		iconMainClasses: String,
		iconMainTransform: String,
		iconSub: String,
		iconSubClasses: String,
		iconSubTransform: String
	},
	computed: {
		mainClass() {
			return 'spot-icon-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
		},
		iconMainClass() {
			return this.mergeClasses('main clickable', this.iconMainClasses);
		},
		iconSubClass() {
			return this.mergeClasses('sub', this.iconSubClasses);
		},
		iconSubTransformValue() {
			return this.mergeClasses('shrink-9 up-2', this.iconSubTransform);
		}
	},
	methods: {
		mergeClasses(sClassesA, sClassesB) {
			return [
				...(sClassesA || '').split(/\s+/),
				...(sClassesB || '').split(/\s+/)
			].filter(Boolean).join(' ');
		}
	}
}
</script>

<template>
	<span :class="mainClass">
		<FontAwesomeLayers>
			<spotIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" />
			<spotIcon v-if="iconSub" :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" />
		</FontAwesomeLayers>
	</span>
</template>
