@props(['ad'])

@php $cover = $ad->coverPhoto(); @endphp

<div class="group relative">
<a href="{{ route('ads.show', $ad) }}" class="card flex gap-4 p-3 transition hover:shadow-md">
    <div class="h-28 w-36 shrink-0 overflow-hidden rounded-lg bg-gray-100">
        @if ($cover)
            <img src="{{ $cover->previewUrl() }}" alt="{{ $ad->title }}" loading="lazy" class="h-full w-full object-cover">
        @else
            <div class="grid h-full w-full place-items-center text-3xl text-gray-300">🗂️</div>
        @endif
    </div>
    <div class="min-w-0 flex-1">
        <div class="text-lg font-bold text-gray-900">{{ $ad->priceLabel() }}</div>
        <div class="line-clamp-1 font-medium text-gray-800">{{ $ad->title }}</div>
        <p class="mt-1 line-clamp-2 text-sm text-gray-600">{{ $ad->description }}</p>
        <div class="mt-2 flex items-center gap-1 text-xs text-muted">
            @if ($ad->city)<span>{{ $ad->city->name }}</span>@endif
            @if ($ad->city && $ad->published_at)<span>·</span>@endif
            @if ($ad->published_at)<span>{{ $ad->published_at->isoFormat('D MMM') }}</span>@endif
        </div>
    </div>
</a>
    <x-fav-heart :ad="$ad" />
</div>