{{--
    Avatar Component
    Props:
      $src    – image URL (null = initials fallback)
      $name   – user's name (used for initials and alt text)
      $size   – xs|sm|md|lg|xl|2xl (default: md)
      $status – online|offline|away|null (shows status indicator)

    Usage:
      <x-utility.avatar :src="$user->avatar" :name="$user->name" size="md" status="online"/>
--}}
@props([
    'src'    => null,
    'name'   => 'User',
    'size'   => 'md',
    'status' => null,
])

@php
    $sizes = [
        'xs' => 'h-6 w-6 text-[10px]',
        'sm' => 'h-8 w-8 text-xs',
        'md' => 'h-10 w-10 text-sm',
        'lg' => 'h-12 w-12 text-base',
        'xl'  => 'h-16 w-16 text-xl',
        '2xl' => 'h-28 w-28 text-2xl',
        '3xl' => 'h-32 w-32 text-3xl',
        '4xl' => 'h-36 w-36 text-4xl',
        '5xl' => 'h-40 w-40 text-5xl',
        '6xl' => 'h-44 w-44 text-6xl',
        '7xl' => 'h-48 w-48 text-7xl',
        '8xl' => 'h-52 w-52 text-8xl',
        '9xl' => 'h-56 w-56 text-9xl',
        '10xl' => 'h-60 w-60 text-10xl',
    ];
    $sizeClass = $sizes[$size] ?? $sizes['md'];

    $dotSizes = ['xs'=>'h-1.5 w-1.5','sm'=>'h-2 w-2','md'=>'h-2.5 w-2.5','lg'=>'h-3 w-3','xl'=>'h-4 w-4','2xl'=>'h-4 w-4','3xl'=>'h-4 w-4','4xl'=>'h-4 w-4','5xl'=>'h-4 w-4','6xl'=>'h-4 w-4','7xl'=>'h-4 w-4','8xl'=>'h-4 w-4','9xl'=>'h-4 w-4','10xl'=>'h-4 w-4'];
    $dotSize  = $dotSizes[$size] ?? $dotSizes['md'];

    $statusColors = [
        'online'  => 'bg-green-400',
        'offline' => 'bg-surface-400',
        'away'    => 'bg-amber-400',
        'busy'    => 'bg-red-400',
    ];

    // Generate initials (max 2 chars)
    $initials = collect(explode(' ', $name))->map(fn($w) => strtoupper($w[0] ?? ''))->take(2)->implode('');

    // Deterministic background color from name
    $colors = ['bg-primary-500','bg-purple-500','bg-pink-500','bg-indigo-500','bg-cyan-500','bg-teal-500','bg-green-500','bg-amber-500'];
    $bg = $colors[crc32($name) % count($colors)];

    $ringClass = 'ring-2 ring-border';
@endphp

<div class="relative inline-flex flex-shrink-0 avatar-wrapper">
    <img
        src="{{ $src }}"
        alt="{{ $name }}"
        class="avatar-image {{ $sizeClass }} rounded-full object-cover {{ $ringClass }} {{$src ? '':'hidden'}}"
    />
    <div class="avatar-initials {{ $sizeClass }} {{ $bg }} rounded-full flex items-center justify-center
                font-semibold text-white {{ $ringClass }} select-none  {{$src ? 'hidden':''}}">
        {{ $initials }}
    </div>

    @if($status)
        <span class="absolute bottom-0 end-0 {{ $dotSize }} rounded-full
                     {{ $statusColors[$status] ?? 'bg-surface-400' }}
                     ring-2 ring-card"
              :title="'{{ ucfirst($status) }}'">
        </span>
    @endif
</div>