@props(['game'])

<a href="{{ route('games.show', $game) }}"
   class="group block bg-[#16161d] rounded-lg overflow-hidden hover:ring-1 hover:ring-purple-500 transition-all duration-200">
    <!-- Cover -->
    <div class="aspect-[3/4] bg-[#0f0f13] overflow-hidden">
        @if($game->cover_url)
            <img src="{{ $game->cover_url }}"
                 alt="{{ $game->title }}"
                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        @else
            <div class="w-full h-full flex items-center justify-center">
                <svg class="w-12 h-12 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
                </svg>
            </div>
        @endif
    </div>

    <!-- Info -->
    <div class="p-3">
        <h3 class="text-sm font-medium text-slate-200 group-hover:text-white truncate leading-tight">
            {{ $game->title }}
        </h3>
        <div class="flex items-center justify-between mt-1.5">
            <span class="text-xs text-slate-500">{{ $game->release_year ?? '—' }}</span>
            @if($game->rating_avg)
                <div class="flex items-center gap-1">
                    <svg class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-xs text-slate-400 font-medium">{{ number_format($game->rating_avg, 1) }}</span>
                </div>
            @endif
        </div>
    </div>
</a>