<template>
	<ul class="socials nolist">
		<li
			v-for="social in socials"
			:key="`social-${rev.id}-${index}-${social.id}`"
			class="delta-item"
			:class="{ modified: social.modified }"
		>
			<a
				:href="getUrl(social)"
				target="_blank"
				class="link"
			>
				<Icon
					v-if="social.platform && env.socials.urls[social.platform]"
					:icon="iconMap[social.platform] || social.platform"
					:title="social.platform"
					:class="`icon-social icon-${social.platform}`"
				/>

				<Icon
					v-else-if="social.platform"
					icon="bubbles10"
					:title="social.platform"
					:class="`icon-social icon-${social.platform} icon-generic`"
				/>

				<Icon
					v-else-if="social.url"
					icon="sphere"
					:title="social.platform"
					:class="`icon-social icon-${social.platform} icon-generic`"
				/>

				{{ social.handle || social.url }}
			</a>
		</li>&nbsp;
	</ul>
</template>

<script setup>
import { inject } from 'vue';

import formatTemplate from 'template-format';

const pageContext = inject('pageContext');
const { env } = pageContext;

defineProps({
	rev: {
		type: Object,
		default: null,
	},
	index: {
		type: Number,
		default: null,
	},
	socials: {
		type: Array,
		default: () => [],
	},
});

const iconMap = {
	twitter: 'twitter-x',
};

function getUrl(social) {
	if (social.url) {
		return social.url;
	}

	if (env.socials.urls[social.platform]) {
		return formatTemplate(env.socials.urls[social.platform], { handle: social.handle });
	}

	return null;
}
</script>

<style scoped>
.socials {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.delta-item .link {
	display: inline-flex;
	align-items: center;
	padding: .25rem .5rem;
	border-radius: .25rem;
	box-shadow: 0 0 3px var(--shadow-weak-20);
	color: inherit;

	.icon {
		margin-right: .5rem;
		height: auto;
	}

	.icon-generic {
		fill: var(--glass-strong-10);
	}
}

.delta-item.modified {
	font-weight: bold;
}
</style>