@props(['account'])

@php
    $isNew = $account->created_at && $account->created_at->gt(now()->subDays(3));
@endphp

<a href="{{ route('shop.show', $account) }}" class="group block rounded-2xl border border-gray-800 bg-gray-900 overflow-hidden hover:border-indigo-500/60 transition">
    <div class="relative h-40 overflow-hidden">
        @if (! empty($account->images[0] ?? null))
            <img src="{{ Storage::url($account->images[0]) }}" alt="{{ $account->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
        @else
            <x-cover-art :seed="$account->slug" class="h-full w-full transition duration-500 group-hover:scale-105" icon-class="h-10 w-10" />
        @endif
        <div class="absolute top-2 left-2 flex gap-1.5">
            <span class="rounded-full bg-black/60 px-2 py-1 text-[11px] text-gray-200">{{ $account->game->name }}</span>
            @if ($isNew)
                <span class="rounded-full bg-emerald-500/90 px-2 py-1 text-[11px] font-semibold text-white">Новинка</span>
            @endif
        </div>
    </div>
    <div class="p-4">
        <div class="text-sm font-semibold text-white truncate">{{ $account->title }}</div>
        @if (! empty($account->attributes))
            <div class="mt-2 flex flex-wrap gap-1.5">
                @foreach (array_slice($account->attributes, 0, 3, true) as $key => $value)
                    <span class="inline-flex items-center gap-1 rounded-full bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400">
                        <x-ui-icon name="sparkles" class="h-3 w-3" /> {{ $key }}: {{ $value }}
                    </span>
                @endforeach
            </div>
        @endif
        <div class="mt-3 flex items-center justify-between">
            <span class="text-base font-bold text-indigo-400">{{ number_format($account->price, 0, ',', ' ') }} {{ $account->currency }}</span>
            <span class="text-sm text-indigo-400 group-hover:text-indigo-300">Детальніше →</span>
        </div>
    </div>
</a>