@props([
    'url' => null, 
    'name' => 'User', 
    'size' => 35, 
    'circle' => true,
    'status' => null, // 'online', 'offline', 'busy', etc.
])

@php
    $classes = $circle ? 'rounded-circle' : 'rounded';
    $style   = "width:{$size}px; height:{$size}px; object-fit:cover;";
    $initial = strtoupper(substr($name, 0, 1));
    
    // Deterministic Color Generation (Hash del nombre para que siempre sea el mismo color)
    $colors = ['primary', 'success', 'danger', 'warning', 'info', 'secondary', 'indigo', 'purple', 'pink', 'teal'];
    $hash   = crc32($name);
    $color  = $colors[abs($hash) % count($colors)];
    
    // Status Indicator
    $statusColor = match($status) {
        'online' => '#28a745',
        'offline' => '#6c757d',
        'busy' => '#dc3545',
        'away' => '#ffc107',
        default => null
    };
@endphp

<div class="d-inline-block position-relative">
    @if($url)
        <img src="{{ $url }}" alt="{{ $name }}" 
             {{ $attributes->merge(['class' => "$classes shadow-sm border border-white", 'style' => $style]) }}>
    @else
        <div {{ $attributes->merge([
            'class' => "$classes bg-$color text-white d-inline-flex align-items-center justify-content-center shadow-sm font-weight-bold border border-white",
            'style' => "$style font-size: " . ($size * 0.45) . "px;"
        ]) }}>
            {{ $initial }}
        </div>
    @endif

    {{-- Indicador de Estado --}}
    @if($statusColor)
        <span class="position-absolute border border-white rounded-circle"
              style="
                width: {{ $size * 0.3 }}px; 
                height: {{ $size * 0.3 }}px; 
                bottom: 0px; 
                right: 0px; 
                background-color: {{ $statusColor }};
                box-shadow: 0 0 0 2px #fff;
              ">
        </span>
    @endif
</div>