@props(['users' => [], 'max' => 5, 'size' => 'sm'])

@php
$display = array_slice($users, 0, $max);
$remaining = count($users) - $max;
@endphp

<div class="flex items-center -space-x-2">
    @foreach($display as $user)
        <x-rp-avatar :name="$user['name'] ?? ''" :src="$user['avatar'] ?? null" :size="$size" :border="true" />
    @endforeach
    @if($remaining > 0)
        <div class="h-8 w-8 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center text-xs font-medium text-slate-600 dark:text-slate-300 ring-2 ring-white dark:ring-slate-800">
            +{{ $remaining }}
        </div>
    @endif
</div>