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

<div class="w-full max-w-4xl">
    <h2 class="studio-title mb-8 text-center text-4xl">{{ __('Leaderboard') }}</h2>
    <div class="space-y-3">
        @foreach ($leaderboard as $row)
            <div class="flex items-center gap-6 rounded-2xl border px-6 py-4 {{ $row['rank'] === 1 ? 'border-gold-500 bg-gold-500/10' : 'border-white/10 bg-ink-900/60' }}">
                <span class="w-12 text-center text-3xl font-black text-gold-500">{{ $row['rank'] }}</span>
                @if ($row['photo_url'] ?? null)
                    <img src="{{ $row['photo_url'] }}" class="h-14 w-14 rounded-xl object-cover" alt="">
                @else
                    <span class="flex h-14 w-14 items-center justify-center rounded-xl bg-ink-800 text-xl font-bold text-gold-300">{{ \Illuminate\Support\Str::substr($row['name'], 0, 1) }}</span>
                @endif
                <span class="flex-1 text-2xl font-bold">{{ $row['name'] }}</span>
                <span class="font-mono text-3xl font-black text-gold-300">{{ number_format($row['points']) }}</span>
            </div>
        @endforeach
    </div>
</div>