@props(['leaderboard' => [], 'title' => null])

<div class="w-full max-w-4xl text-center">
    <p class="text-sm uppercase tracking-[0.4em] text-gold-400">{{ $title }}</p>
    <h2 class="studio-title mt-2 text-5xl">{{ __('Final Results') }}</h2>

    @if (count($leaderboard))
        @php $winner = $leaderboard[0]; @endphp
        <div class="mt-10">
            @if ($winner['photo_url'] ?? null)
                <img src="{{ $winner['photo_url'] }}" class="mx-auto h-48 w-48 rounded-full border-4 border-gold-500 object-cover shadow-2xl shadow-gold-500/30" alt="">
            @else
                <div class="mx-auto flex h-48 w-48 items-center justify-center rounded-full border-4 border-gold-500 bg-ink-900 text-7xl font-black text-gold-400">
                    {{ \Illuminate\Support\Str::substr($winner['name'], 0, 1) }}
                </div>
            @endif
            <h3 class="mt-6 text-4xl font-black">{{ $winner['name'] }}</h3>
            <p class="mt-2 text-3xl font-bold text-gold-400">{{ number_format($winner['points']) }} {{ __('points') }}</p>
        </div>

        <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3">
            @foreach (array_slice($leaderboard, 1, 5) as $row)
                <div class="rounded-2xl border border-white/10 bg-ink-900/60 p-4">
                    <p class="text-sm text-gray-500">{{ __('Rank') }} {{ $row['rank'] }}</p>
                    <p class="text-lg font-semibold">{{ $row['name'] }}</p>
                    <p class="font-mono text-gold-300">{{ number_format($row['points']) }}</p>
                </div>
            @endforeach
        </div>
    @endif
</div>