@props(['comic', 'index', 'showFullInfo' => true])

@php
    $rankColors = [
        0 => 'text-yellow-500',
        1 => 'text-gray-400',
        2 => 'text-amber-700'
    ];
    $rankColor = $rankColors[$index] ?? 'text-gray-600';
    $isTopThree = $index < 3;
@endphp

<a href="{{ route('comics.detail', ['slug' => $comic->slug]) }}" class="flex items-center gap-4 group cursor-pointer">
    <div class="text-{{ $isTopThree ? '2xl' : 'base' }} font-{{ $isTopThree ? 'black' : 'bold' }} {{ $rankColor }} w-6 text-center {{ $isTopThree ? 'italic' : '' }}">
        {{ $index + 1 }}
    </div>

    @if($showFullInfo && $isTopThree)
    <div class="w-12 h-16 rounded bg-cover bg-center shrink-0"
        style="background-image: url('https://img.otruyenapi.com/uploads/comics/{{ $comic->thumb_url }}');"></div>
    @endif

    <div class="flex flex-col flex-1 min-w-0">
        <h4 class="{{ $isTopThree ? 'text-white' : 'text-gray-300' }} text-sm font-{{ $isTopThree ? 'bold' : 'medium' }} truncate group-hover:text-primary transition-colors">
            {{ $comic->title }}
        </h4>
        @if($showFullInfo && $isTopThree)
        <p class="text-gray-500 text-xs">{{ $comic->author?->name }} • {{ number_format($comic->view_count / 1000000, 1) }}M views</p>
        @endif
    </div>

    @if(!$isTopThree)
    <span class="text-xs text-gray-600">{{ number_format($comic->view_count / 1000000, 1) }}M</span>
    @endif
</a>