@props(['user' => null, 'size' => 'md'])

@php
    $sizes = [
        'xs' => 'h-6 w-6 text-[10px]',
        'sm' => 'h-7 w-7 text-xs',
        'md' => 'h-9 w-9 text-sm',
        'lg' => 'h-12 w-12 text-base',
    ];
    $cls = $sizes[$size] ?? $sizes['md'];
    $palette = ['bg-rose-500','bg-amber-500','bg-emerald-500','bg-sky-500','bg-indigo-500','bg-fuchsia-500','bg-teal-500'];
    $color = $user ? $palette[$user->id % count($palette)] : 'bg-slate-400';
@endphp

@if($user && $user->avatarUrl())
    <img src="{{ $user->avatarUrl() }}" alt="{{ $user->name }}"
         {{ $attributes->merge(['class' => "$cls rounded-full object-cover ring-2 ring-white/10"]) }}>
@else
    <span {{ $attributes->merge(['class' => "$cls $color inline-flex items-center justify-center rounded-full font-semibold text-white ring-2 ring-white/10"]) }}
          title="{{ $user?->name }}">
        {{ $user ? $user->initials() : '?' }}
    </span>
@endif