<template>
	<MkA class="mention" :to="`/@@${username}`" @click.stop>
		<img
			v-if="group?.iconUrl"
			class="icon"
			:src="group.iconUrl"
			alt=""
			loading="lazy"
			decoding="async"
		/>
		<span v-else class="icon placeholder">
			<i class="ph-users-three ph-bold"></i>
		</span>
		<span class="main">
			<span class="username">@@{{ username }}</span>
		</span>
	</MkA>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import MkA from "@/components/global/MkA.vue";
import * as os from "@/os";

const props = defineProps<{
	username: string;
}>();

const group = ref<any>(null);

async function fetchGroup() {
	group.value = null;
	try {
		group.value = await os.api("users/groups/show-by-username", {
			username: props.username,
		});
	} catch {
		group.value = null;
	}
}

watch(() => props.username, fetchGroup);
onMounted(fetchGroup);
</script>

<style lang="scss" scoped>
.mention {
	position: relative;
	display: inline-block;
	padding: 2px 8px 2px 2px;
	margin-block: 2px;
	border-radius: 999px;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mention);
	isolation: isolate;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--mention);
		opacity: 0.1;
		z-index: -1;
	}

	> .icon {
		display: inline-grid;
		place-items: center;
		width: 1.5em;
		height: 1.5em;
		object-fit: cover;
		margin: 0 0.2em 0 0;
		vertical-align: bottom;
		border-radius: 6px;
		overflow: hidden;
	}

	> .placeholder {
		background: var(--panelHighlight);
	}
}
</style>
