@props(['ad'])

@php
    $cover = $ad->coverPhoto();
    $themes = config('placeo_categories');
    $name = $ad->relationLoaded('category') ? $ad->category?->name : null;
    $t = $themes['map'][$name] ?? $themes['default'];
    $isNew = $ad->published_at && $ad->published_at->isToday();
@endphp

<div class="group relative icon-thin">
    <a href="{{ route('ads.show', $ad) }}" class="flex h-full flex-col">
        {{-- Превью --}}
        <div class="relative h-[150px] w-full overflow-hidden rounded-[14px] sm:h-[188px]" style="background: {{ $t['tint'] }}">
            @if ($cover)
                <img src="{{ $cover->previewUrl() }}" alt="{{ $ad->title }}" loading="lazy"
                     class="listing-thumb h-full w-full object-cover transition duration-200 group-hover:brightness-[0.98]">
            @else
                <div class="grid h-full w-full place-items-center text-[52px] opacity-40" style="color: {{ $t['ink'] }}">
                    <i data-lucide="{{ $t['icon'] }}"></i>
                </div>
            @endif

            @if ($isNew)
                <span class="bg-brand-gradient absolute left-3 top-3 rounded-full px-2.5 py-1 text-[11px] font-semibold text-white">Новое</span>
            @endif
        </div>

        {{-- Инфо --}}
        <div class="flex flex-1 flex-col gap-1 pt-2.5">
            <div class="font-display text-[18.5px] font-extrabold tracking-[-0.02em] text-ink">{{ $ad->priceLabel() }}</div>
            <div class="line-clamp-2 text-[14.5px] leading-[1.35] text-gray-700">{{ $ad->title }}</div>
            <div class="mt-0.5 flex items-center gap-1.5 text-[13px] text-muted">
                @if ($ad->city)
                    <span class="text-[14px] text-gray-400"><i data-lucide="map-pin"></i></span>
                    <span>{{ $ad->city->name }}</span>
                @endif
                @if ($ad->city && $ad->published_at)<span class="text-gray-300">·</span>@endif
                @if ($ad->published_at)<span>{{ $ad->published_at->isoFormat('D MMM') }}</span>@endif
            </div>
        </div>
    </a>

    <x-fav-heart :ad="$ad" />
</div>