@props([
 'title',
 'icon',
 'data',
 'valueKey',
 'valueType',
 'relationship' => null,
 'formatValue' => null,
])

<div class="rounded-xl bg-[var(--color-surface)] p-3 md:p-4 shadow-xl border border-[var(--color-text-muted)]">
 <div class="flex justify-center gap-x-3 text-center font-bold text-[var(--color-text)]">
 <div class="flex items-center">
 <img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="{{ $title }}" class="w-5 h-5 md:w-6 md:h-6" style="image-rendering: pixelated;">
 </div>
 <span class="text-base md:text-lg">{{ __($title) }}</span>
 </div>

 <div class="mt-3 md:mt-4 flex flex-col gap-y-2 md:gap-y-3">
 @forelse ($data as $index => $entry)
 <div class="group relative p-3 md:p-4 rounded-xl bg-[var(--color-background)] flex gap-x-2 md:gap-x-3 items-center h-[70px] md:h-[80px] overflow-hidden border border-[var(--color-text-muted)] hover:border-[var(--color-primary)] hover:bg-[var(--color-primary)] transition-all duration-300">
 <!-- Rank Badge -->
 <div class="relative flex-shrink-0">
 <div @class([
 'w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center font-bold text-base md:text-lg shadow-lg',
 'bg-[var(--color-primary)] text-[var(--button-text-color)] ring-2 ring-[var(--color-primary)] ring-offset-2 ring-offset-[var(--color-surface)]' => $index + 1 == 1,
 'bg-[var(--color-text-muted)] text-[var(--button-text-color)] ring-2 ring-[var(--color-text-muted)] ring-offset-2 ring-offset-[var(--color-surface)]' => $index + 1 == 2,
 'bg-[var(--color-accent)] text-white ring-2 ring-[var(--color-accent)] ring-offset-2 ring-offset-[var(--color-surface)]' => $index + 1 == 3,
 'bg-[var(--color-background)] text-[var(--color-text-muted)]' => $index + 1 > 3,
 ])>
 {{ $index + 1 }}
 </div>
 @if($index + 1 <= 3)
 <div class="absolute -top-1 -right-1 text-lg md:text-xl">
 {{ $index + 1 == 1 ? '🥇' : ($index + 1 == 2 ? '🥈' : '🥉') }}
 </div>
 @endif
 </div>

 <!-- Avatar -->
 <div class="relative flex-shrink-0">
 <img @class([
 'w-12 h-12 md:w-16 md:h-16 rounded-lg border-2 transition-all duration-300 group-hover:scale-110',
 'border-[var(--color-primary)] shadow-lg shadow-[var(--color-primary)]/30' => $index + 1 == 1,
 'border-[var(--color-text-muted)]' => $index + 1 == 2,
 'border-[var(--color-accent)]' => $index + 1 == 3,
 'border-[var(--color-text-muted)] group-hover:border-[var(--color-primary)]' => $index + 1 > 3,
 ])
 src="{{ setting('avatar_imager') }}{{ $relationship ? $entry->{$relationship}?->look : $entry->look }}&size=b&head_direction=2&gesture=sml&headonly=1"
 alt="" />
 @if($index + 1 == 1)
 <div class="absolute -bottom-1 -right-1 w-4 h-4 md:w-5 md:h-5 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-xs shadow-lg">
 👑
 </div>
 @endif
 </div>

 <!-- User Info -->
 <div class="flex-1 min-w-0">
 <p class="font-bold text-[var(--color-text)] truncate group-hover:text-[var(--color-primary)] transition-colors duration-300 text-sm md:text-base">
 {{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
 </p>
 <p @class([
 'text-xs md:text-sm font-medium',
 'text-[var(--color-primary)]' => $index + 1 == 1,
 'text-[var(--color-text-muted)]' => $index + 1 > 1,
 ])>
 {{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
 </p>
 </div>

 <!-- Trophy -->
 @if($index + 1 == 1)
 <div class="text-2xl md:text-3xl animate-pulse">🏆</div>
 @elseif($index + 1 <= 3)
 <div class="text-xl md:text-2xl">⭐</div>
 @endif
 </div>
 @empty
 <div class="p-6 md:p-8 text-center text-[var(--color-text-muted)]">
 <div class="text-3xl md:text-4xl mb-2">📊</div>
 <p>No data available</p>
 </div>
 @endforelse
 </div>
</div>