@props(['comic'])

<a href="{{ route('comics.detail', ['slug' => $comic->slug]) }}" class="group flex flex-col gap-2">

    <div class="relative w-full aspect-[2/3] rounded-lg overflow-hidden">
        <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110"
            style="background-image: url('https://img.otruyenapi.com/uploads/comics/{{ $comic->thumb_url }}');"></div>

        @if($comic->is_hot)
        <div class="absolute top-2 left-2 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-sm shadow-md">
            HOT
        </div>
        @endif

        @if($comic->is_new)
        <div class="absolute top-2 left-2 bg-green-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-sm shadow-md">
            NEW
        </div>
        @endif

        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors"></div>
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
            <div class="bg-primary text-white max-h-10 rounded-full p-2 shadow-lg transform scale-75 group-hover:scale-100 transition-transform">
                <span class="material-symbols-outlined block">play_arrow</span>
            </div>
        </div>
    </div>
    <div>
        <h4 class="text-white text-sm font-bold line-clamp-1 group-hover:text-primary transition-colors">
            {{ $comic->title }}
        </h4>
        <div class="flex justify-between items-center text-xs text-gray-400 mt-1">
            @php
                $latestChapter = $comic->chapters->first();
            @endphp
            <span class="truncate max-w-[60%]">{{ $latestChapter ? $latestChapter->title : 'Chưa có chương' }}</span>
            {{-- {{ dd($comic) }} --}}
            <span class="text-gray-600">{{ $comic->updated_at->diffForHumans() }}</span>
        </div>
    </div>
</a>