@props(['comic'])

<a href="{{ route('comics.detail', ['slug' => $comic->slug]) }}" class="bg-surface-dark rounded-xl p-3 flex gap-4 hover:bg-[#25222e] transition-colors border border-transparent hover:border-gray-800 shadow-xl">
    <div class="w-24 h-36 shrink-0 rounded-lg bg-cover bg-center shadow-md"
        style="background-image: url('https://img.otruyenapi.com/uploads/comics/{{ $comic->thumb_url }}');"></div>
    <div class="flex flex-col justify-between py-1 flex-1">
        <div>
            <h4 class="text-white font-bold text-lg leading-tight mb-1 line-clamp-1 hover:text-primary cursor-pointer transition-colors">
                {{ $comic->title }}
            </h4>
            <p class="text-gray-400 text-xs mb-2">{{ $comic->author?->name }}</p>
            <div class="flex gap-2 mb-3 flex-wrap overflow-hidden max-h-10">
                @php
                    $maxCategories = 2;
                    $visibleCategories = $comic->categories->take($maxCategories);
                    $remainingCount = max(0, $comic->categories->count() - $maxCategories);
                @endphp

                @foreach($visibleCategories as $category)
                <span class="text-[10px] px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 border border-blue-500/20 whitespace-nowrap">
                    {{ $category->name }}
                </span>
                @endforeach

                @if($remainingCount > 0)
                <span class="text-[10px] px-2 py-0.5 rounded bg-gray-500/10 text-gray-400 border border-gray-500/20 whitespace-nowrap">
                    +{{ $remainingCount }}
                </span>
                @endif

                @if($comic->status === 'completed')
                <span class="text-[10px] px-2 py-0.5 rounded bg-green-500/10 text-green-400 border border-green-500/20 whitespace-nowrap">
                    Full
                </span>
                @endif
            </div>
            <p class="text-gray-500 text-xs line-clamp-2">{{ Str::limit($comic->description, 80) }}</p>
        </div>
    </div>
</a>