<script setup lang="ts">
import type { IconType } from '@bagelink/vue'
import { initials, Icon } from '@bagelink/vue'
import Image from './Image.vue'

withDefaults(defineProps<{
	fallback?: string
	src?: string
	name?: string
	icon?: IconType
	alt?: string
	size?: number
}>(), { size: 50 })
</script>

<template>
	<div
		class="round overflow-hidden txt-center p-0 avatar flex justify-content-center"
		:style="{ width: `${size}px`, height: `${size}px` }"
	>
		<Image v-if="src" :src="src" :alt="alt || name" />
		<Icon v-else-if="icon" :icon="icon" :size="size / 40" />
		<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
			{{ (fallback || initials(name || '')).toUpperCase() }}
		</p>
	</div>
</template>

<style scoped>
.avatar {
	background-color: var(--bgl-gray-tint);
	border: 0.5px solid var(--border-color);
	flex-shrink: 0;
}

.avatar p {
	font-size: 1.5rem;
	line-height: 50px;
	margin: 0;
	font-weight: 200;
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
</style>
