@props(['members'])

<div class="rounded-2xl bg-white p-4 shadow-sm shadow-gray-200/60 border-2 border-gray-300">
    <p class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-400">Equipo</p>

    <div class="flex flex-wrap gap-4">
        @foreach ($members as $member)
            <div class="flex items-center gap-2">
                <x-avatar :name="$member->name" size="sm" />
                <div class="leading-tight">
                    <p class="text-sm font-medium text-gray-700">{{ $member->name }}</p>
                    <span
                        data-presence-label="{{ $member->id }}"
                        data-offline-text="Desconectado"
                        data-online-text="En línea"
                        class="inline-block rounded-full px-2 py-0.5 text-[11px] font-semibold text-red-500"
                    >Desconectado</span>
                </div>
            </div>
        @endforeach
    </div>
</div>