@props(['player' => [], 'position' => 1])

@php
$pos = (int) ($player['position'] ?? $position);
$mod = $pos <= 3 ? "rank-row--{$pos}" : '';
@endphp

<div class="rank-row {{ $mod }}">
    <div class="rank-row__pos">{{ $pos }}</div>
    <img
        class="rank-row__avatar"
        src="{{ $player['avatar'] ?? asset('assets/images/generated/players/player-1.webp') }}"
        alt=""
        width="32"
        height="32"
        loading="lazy"
        onerror="this.src='{{ asset('assets/images/generated/players/player-1.webp') }}'"
    >
    <div class="rank-row__name">
        <div class="name">
            {{ $player['username'] ?? 'Player' }}
            @if(!empty($player['online']))
                <span class="visually-hidden">Online</span>
                <span aria-hidden="true" style="display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--arena-green);margin-inline-start:4px;"></span>
            @endif
        </div>
        <div class="rank">{{ $player['rank'] ?? 'Unranked' }}</div>
    </div>
    <div class="rank-row__points rank-points">{{ number_format((int) ($player['points'] ?? 0)) }} RP</div>
</div>
