{{--
    Avatar Component
    Props:
      $size   – xs|sm|md|lg|xl (default: md)
      <x-skeleton.avatar size="md"/>
--}}
@props([
    'src'    => null,
    'name'   => 'User',
    'size'   => 'md',
    'status' => null,
])

@php
    $sizes = [
        'xs' => 'h-6 w-6',
        'sm' => 'h-8 w-8',
        'md' => 'h-10 w-10',
        'lg' => 'h-12 w-12',
        'xl' => 'h-16 w-16',
        '2xl' => 'h-28 w-28',
    ];
    $sizeClass = $sizes[$size] ?? $sizes['md'];

    
@endphp

<div class="animate-skeleton bg-muted {{ $sizeClass }} flex-shrink-0 rounded-full"></div>