@props(['rank', 'name', 'team', 'avatar', 'score', 'isCurrent' => false, 'unit' => 'điểm'])

<div class="flex items-center justify-between py-3 border-b border-gray-50 last:border-0 hover:bg-gray-50 rounded-xl px-3 transition-colors {{ $isCurrent ? 'bg-[#F5F8FF]' : '' }}">
    <div class="flex items-center gap-3 min-w-0 flex-1">
        <!-- Rank -->
        <div class="w-6 flex justify-center items-center flex-shrink-0">
            @if($rank == 1)
                <span class="text-xl">👑</span>
                <span class="absolute text-[10px] font-bold text-amber-500 translate-y-3">1</span>
            @elseif($rank == 2)
                <span class="text-[14px] text-gray-500 font-bold">2</span>
            @elseif($rank == 3)
                <span class="text-[14px] text-gray-500 font-bold">3</span>
            @else
                <span class="text-[14px] font-bold {{ $isCurrent ? 'text-blue-600' : 'text-gray-400' }}">{{ $rank }}</span>
            @endif
        </div>
        
        <!-- Avatar & Info -->
        <div class="flex items-center gap-3 ml-1 min-w-0 flex-1">
            <img src="{{ $avatar }}" alt="{{ $name }}" class="w-10 h-10 rounded-full object-cover shadow-sm border border-gray-100 flex-shrink-0" onerror="this.onerror=null; this.src='{{ asset('images/avatar.png') }}';">
            <div class="flex flex-col min-w-0 flex-1">
                <span class="text-[14px] font-bold {{ $isCurrent ? 'text-[#1a2b49]' : 'text-gray-800' }} leading-tight mb-0.5 truncate">{{ $name }}</span>
                <span class="text-[12px] text-gray-500 font-medium truncate" title="{{ $team }}">{{ $team }}</span>
            </div>
        </div>
    </div>
    
    <!-- Score -->
    <div class="text-[14px] flex-shrink-0 ml-3">
        <span class="font-extrabold {{ $isCurrent ? 'text-blue-600' : 'text-gray-800' }}">{{ number_format($score, 0, ',', '.') }}</span>
        <span class="text-gray-400 font-medium ml-1 text-[13px]">{{ $unit }}</span>
    </div>
</div>
