@props([
    /** Los productos a pintar. Colección o array de modelos con `name` e `image_url`. */
    'products' => [],
    /** Texto cuando no hay ninguno. Un guion por defecto: ocupa menos que una frase. */
    'empty' => '—',
])

{{-- ============================================================
     Los iconos de producto, **iguales en todas las pantallas**.

     Estaban escritos tres veces —en la tarjeta de entorno, en la ficha del cliente y en
     el listado de licencias— y ya habían empezado a divergir: 32 px montados en una,
     32 px montados en otra y 20 px en fila en la tercera. El mismo concepto con tres
     dibujos distintos según dónde se mire es exactamente lo que el brief general prohíbe
     (y lo que ya pasó con los iconos del menú, MGR-029).

     Las decisiones, en un solo sitio:

     - **32 px y montados 8 px**: es lo que permite ver cinco productos en el ancho de dos
       y a la vez reconocerlos, que es para lo que están —se identifican por la imagen, no
       por el nombre—.
     - **`z-index` descendente**: así el primero queda encima. Al revés, cada icono
       taparía al anterior y la pila se leería al contrario.
     - **Sin imagen, las iniciales**: un hueco vacío donde debería haber un producto se
       lee como un fallo de carga.
     - El nombre va en el `title`, que es lo que se necesita para identificar el que no se
       reconoce a la primera.
     ============================================================ --}}
@php
    $lista = collect($products)->values();
@endphp

<div {{ $attributes->merge(['class' => 'flex items-center']) }}>
    @forelse ($lista as $indice => $producto)
        <div class="group relative flex-none"
             style="z-index:{{ $lista->count() - $indice }}; {{ $indice > 0 ? 'margin-left:-8px;' : '' }}">
            @if ($producto->image_url ?? null)
                <img src="{{ $producto->image_url }}" alt="{{ $producto->name }}" title="{{ $producto->name }}"
                     class="h-8 w-8 rounded-full border-2 bg-white object-contain transition-colors"
                     style="border-color:var(--border-default);"
                     onmouseover="this.style.borderColor='var(--orange-500)'"
                     onmouseout="this.style.borderColor='var(--border-default)'">
            @else
                <span title="{{ $producto->name }}"
                      class="flex h-8 w-8 items-center justify-center rounded-full border-2 text-[11px] font-bold"
                      style="border-color:var(--border-default); background:var(--surface-brand-subtle); color:var(--orange-600);">
                    {{ Str::upper(Str::substr($producto->name, 0, 2)) }}
                </span>
            @endif
        </div>
    @empty
        <span class="text-[11.5px]" style="color:var(--text-subtle);">{{ $empty }}</span>
    @endforelse
</div>