<script setup>
import { computed } from 'vue';
import Avatar from 'vue3-avatar';

const props = defineProps({
    src: { type: String, default: null },
    name: { type: String, default: 'U' },
    size: { type: [Number, String], default: 40 },
    rounded: { type: Boolean, default: true },
    border: { type: String, default: '' },
});

const numSize = computed(() => Number(props.size));
const hasImage = computed(() => !!props.src);
const initials = computed(() => {
    const parts = (props.name || 'U').trim().split(/\s+/);
    if (parts.length >= 2) {
        return (parts[0][0] + parts[1][0]).toUpperCase();
    }
    return parts[0][0]?.toUpperCase() || 'U';
});

const containerStyle = computed(() => ({
    width: numSize.value + 'px',
    height: numSize.value + 'px',
}));
</script>

<template>
    <div class="user-avatar inline-flex flex-shrink-0" :style="containerStyle">
        <!-- Real image -->
        <img 
            v-if="hasImage" 
            :src="src" 
            :alt="name" 
            :class="[
                'w-full h-full object-cover',
                rounded ? 'rounded-full' : 'rounded-lg',
                border
            ]"
        >
        <!-- Gradient avatar fallback via vue3-avatar -->
        <Avatar 
            v-else
            :name="name"
            :size="numSize"
            :is-rounded="rounded"
            background-color="#3b82f6"
            color="#ffffff"
        />
    </div>
</template>

<style scoped>
.user-avatar :deep(.avatar-component) {
    font-weight: 600;
    letter-spacing: 0.05em;
}
</style>
