<script lang="ts" setup>
import type { User } from '@/types'
import { avatar, name } from '@/utils/discord'
const props = defineProps<{ user: User }>()

const avatarUrl = avatar(props.user)
const userName = name(props.user)
</script>

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