<script lang="ts" setup>
import type { SanitisedActor } from "@stealth-developers/api";

import { computed } from "vue";

const props = defineProps<{ user?: SanitisedActor }>();

const displayedUser = computed(() => {
	const avatarUrl = props.user?.avatar?.startsWith("https")
		? props.user.avatar
		: `https://cdn.discordapp.com/avatars/${props.user?.discordId}/${props.user?.avatar}.png`;
	return { ...props.user, avatarUrl };
});
</script>

<template>
	<div class="user-chip">
		<img :src="displayedUser?.avatarUrl" alt="avatar" />
		<span>{{ displayedUser?.displayName || displayedUser?.username }}</span>
	</div>
</template>

<style scoped>
.user-chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;

	img {
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		flex-shrink: 0;
	}

	span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>