@props(['name' => '?', 'size' => 'md', 'userId' => null, 'showStatus' => false])

@php
    $sizeClasses = match ($size) {
        'xs' => 'h-6 w-6',
        'sm' => 'h-8 w-8',
        'lg' => 'h-12 w-12',
        default => 'h-10 w-10',
    };

    $iconClasses = match ($size) {
        'xs' => 'h-3.5 w-3.5',
        'sm' => 'h-4 w-4',
        'lg' => 'h-7 w-7',
        default => 'h-5 w-5',
    };
@endphp

<span {{ $attributes->merge(['class' => 'relative inline-flex shrink-0']) }}>
    <span
        class="{{ $sizeClasses }} inline-flex items-center justify-center rounded-full border-2 border-gray-300 bg-gray-100 text-gray-500 select-none"
        title="{{ $name }}"
    >
        <svg class="{{ $iconClasses }}" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 12c2.71 0 4.9-2.19 4.9-4.9S14.71 2.2 12 2.2 7.1 4.39 7.1 7.1 9.29 12 12 12Zm0 2.35c-3.26 0-9.8 1.64-9.8 4.9V22h19.6v-2.75c0-3.26-6.54-4.9-9.8-4.9Z" />
        </svg>
    </span>

    @if ($showStatus)
        <span
            @if ($userId) data-presence-dot="{{ $userId }}" @endif
            class="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-white bg-gray-300 transition-colors"
        ></span>
    @endif
</span>