---
const { user, size = 'md' } = Astro.props;

// Размеры аватара
const dimensions = size === 'lg' ? 64 : size === 'sm' ? 32 : 40; // md по умолчанию 40px
const textSize = size === 'lg' ? 'text-xl' : size === 'sm' ? 'text-xs' : 'text-sm';

const getInitials = (name, email) => {
    if (name) {
        return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
    }
    if (email) {
        return email.substring(0, 2).toUpperCase();
    }
    return 'UN';
};

const avatarUrl = user?.avatar
    ? `${import.meta.env.POCKETBASE_URL || 'http://127.0.0.1:8090'}/api/files/${user.collectionId}/${user.id}/${user.avatar}?thumb=100x100`
    : null;

const initials = getInitials(user?.name, user?.email);
---

<div class={`relative flex-shrink-0 rounded-full overflow-hidden border border-gray-200 shadow-sm bg-white flex items-center justify-center text-gray-600 font-bold ${textSize}`} style={`width: ${dimensions}px; height: ${dimensions}px;`}>
    {avatarUrl ? (
            <img
                    src={avatarUrl}
                    alt={user?.name || 'User'}
                    width={dimensions}
                    height={dimensions}
                    class="w-full h-full object-cover"
            />
    ) : (
            <span>{initials}</span>
    )}
</div>
