@props(['stats' => []])

@php
$iconColors = [
    'players' => 'cyan',
    'teams' => 'violet',
    'scrims' => 'red',
    'events' => 'gold',
];
@endphp

<div class="stats-strip" aria-label="Platform statistics">
    @foreach($stats as $stat)
        @php $tone = $iconColors[$stat['key'] ?? ''] ?? 'cyan'; @endphp
        <div class="stat-item">
            <div class="stat-item__icon stat-item__icon--{{ $tone }}" aria-hidden="true">
                @if(($stat['icon'] ?? '') === 'players')
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                @elseif(($stat['icon'] ?? '') === 'teams')
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                @elseif(($stat['icon'] ?? '') === 'scrims')
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                @else
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>
                @endif
            </div>
            <div>
                <div class="stat-item__value stat-number" data-target="{{ (int) ($stat['value'] ?? 0) }}">0</div>
                <div class="stat-item__label">{{ $stat['label'] ?? '' }}</div>
            </div>
        </div>
    @endforeach
</div>
