@props(['ad'])

@php
    $time = $ad['time'] ?? '';
    $date = $ad['date'] ?? '';
    $category = $ad['category'] ?? 'Anzeige';
    $title = $ad['title'] ?? '';
    $company = $ad['company'] ?? '';
    $href = $ad['href'] ?? '#';

    $catClass = 'self-start whitespace-nowrap text-[9.5px] font-bold uppercase leading-snug tracking-[0.14em] text-card-warm-cat max-md:mt-1 max-md:text-[9px] max-md:tracking-[0.1em]';
@endphp

<div class="-mx-4 my-2">
    <div class="flex items-center gap-2.5 px-4">
        <span class="h-px flex-1 bg-bg-card-warm-rule"></span>
        <span class="text-[9px] font-bold uppercase tracking-[0.22em] text-ink-on-dark-muted">Anzeige</span>
        <span class="h-px flex-1 bg-bg-card-warm-rule"></span>
    </div>

    <a href="{{ $href }}" rel="sponsored nofollow" @class([
        'grid items-start bg-bg-card-warm py-4 pl-1.5 pr-4 sm:pl-2',
        'cursor-pointer transition-colors hover:bg-bg-card-warm-hover',
        'max-md:grid-cols-[auto_minmax(0,1fr)] max-md:gap-x-3',
        'md:grid-cols-[3.75rem_6.25rem_minmax(0,1fr)] md:gap-x-4',
    ])>
        <div class="flex min-w-0 shrink-0 flex-col gap-0.5 tabular-nums pt-0.5">
            @if ($time !== '')
                <span class="font-mono text-[11px] leading-none text-card-warm-cat sm:text-[12px]">{{ $time }}</span>
            @endif
            @if ($date !== '')
                <span class="text-[9px] leading-tight text-ink-4 sm:text-[10px]">{{ $date }}</span>
            @endif
            <span class="{{ $catClass }} md:hidden">{{ $category }}</span>
        </div>
        <span class="{{ $catClass }} hidden md:inline">{{ $category }}</span>
        <div class="min-w-0">
            <div class="font-serif text-[15.5px] font-medium leading-[1.3] text-card-warm-title">
                {{ $title }}
            </div>
            @if ($company)
                <div class="mt-1 text-[11px] text-card-warm-cat">{{ $company }}</div>
            @endif
        </div>
    </a>

    <div class="flex items-center gap-2.5 px-4">
        <span class="h-px flex-1 bg-bg-card-warm-rule"></span>
        <span class="text-[9px] font-bold uppercase tracking-[0.22em] text-ink-on-dark-muted">Ende Anzeige</span>
        <span class="h-px flex-1 bg-bg-card-warm-rule"></span>
    </div>
</div>