@props(['url' => null, 'name' => 'User', 'size' => 35, 'circle' => true])

@php
    $classes = $circle ? 'rounded-circle' : 'rounded';
    $style   = "width:{$size}px; height:{$size}px; object-fit:cover;";
    // Obtener inicial
    $initial = strtoupper(substr($name, 0, 1));
    // Colores aleatorios basados en la inicial (Truco visual)
    $colors = ['primary', 'success', 'danger', 'warning', 'info', 'secondary'];
    $color  = $colors[ord($initial) % count($colors)];
@endphp

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