<script lang="ts" setup>
import type { User } from '@/types'
import { computed } from 'vue';
const props = defineProps<{ user?: User }>()

const displayedUser = computed(() => {
	if (!props.user) return { id: '0', name: '?', avatarUrl: 'https://cdn.discordapp.com/app-icons/1350116449611677770/0f6f1cdda4e1c6f0149aa2f099b80463.png?size=256', isModerator: false };
	return props.user;
});
</script>

<template>
	<div class="user-chip">
		<img :src="displayedUser.avatarUrl" alt="avatar" />
		<span>{{ displayedUser.name }}</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>