<script setup lang="ts">
import { initials } from '@bagelink/vue'

withDefaults(defineProps<{
	fallback?: string
	src?: string
	name?: 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` }">
		<img v-if="src" :src="src" :alt="name">
		<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-20);
  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>
