@props([
    'src' => null,
    'name' => '',
    'size' => 'md', // xs sm md lg xl
    'shape' => 'circle', // circle | square
    'status' => null, // online | offline | away
])

@php
    $sizeClass = 'avatar--' . $size;
    $shapeClass = 'avatar--' . $shape;
    $initials = collect(preg_split('/\s+/', trim((string) $name)))
        ->filter()
        ->take(2)
        ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
        ->implode('');
    $initials = $initials !== '' ? $initials : '?';
@endphp

<span {{ $attributes->merge(['class' => 'avatar ' . $sizeClass . ' ' . $shapeClass]) }} title="{{ $name }}">
    @if($src)
        <img src="{{ $src }}" alt="{{ $name }}" class="avatar__img">
    @else
        <span class="avatar__initials">{{ $initials }}</span>
    @endif
    @if($status)
        <span class="avatar__status avatar__status--{{ $status }}" aria-hidden="true"></span>
    @endif
</span>