@props([
    'name' => 'User',
    'imageUrl' => '',
    'hasImage' => false,
    'initials' => '',
    'size' => 'md',
    'online' => null,
    'showStatus' => false,
    'class' => '',
])

@php
    $size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'md';
    $initials = $initials !== '' ? $initials : \App\Support\MessengerAvatar::initials($name);
    $showImg = $hasImage && $imageUrl !== '';
@endphp

<span {{ $attributes->merge(['class' => 'pms-user-avatar pms-user-avatar--'.$size.' '.$class]) }}>
    <span class="pms-user-avatar__inner">
        @if ($showImg)
            <img
                src="{{ $imageUrl }}"
                alt="{{ $name }}"
                class="pms-user-avatar__img"
                loading="lazy"
                decoding="async"
                onerror="this.classList.add('d-none'); this.nextElementSibling.classList.remove('d-none');"
            >
        @endif
        <span class="pms-user-avatar__placeholder {{ $showImg ? 'd-none' : '' }}" aria-hidden="true" title="{{ $name }}">
            <i class="fas fa-user"></i>
            <span class="pms-user-avatar__initials">{{ $initials }}</span>
        </span>
    </span>
    @if ($showStatus)
        <span class="pms-user-avatar__status {{ $online ? 'is-online' : '' }}" aria-label="{{ $online ? 'Online' : 'Offline' }}"></span>
    @endif
</span>