@props(['item', 'compact' => false])

<article class="card-interactive group relative flex h-full flex-col" data-reveal-child>
    @unless ($compact)
        <a href="{{ route('media.show', $item) }}" tabindex="-1" aria-hidden="true">
            <x-image :src="$item->thumbnail" :alt="$item->title" ratio="16/9" rounded="rounded-none" zoom />
        </a>
    @endunless

    <div class="flex flex-1 flex-col p-6">
        <div class="mb-3 flex flex-wrap items-center gap-3">
            <x-badge variant="brand">{{ $item->typeLabel() }}</x-badge>

            @if ($item->published_at)
                <time datetime="{{ $item->published_at->toDateString() }}" class="meta-label">
                    {{ $item->published_at->format('d M Y') }}
                </time>
            @endif
        </div>

        <h3 class="font-display text-lg font-semibold leading-snug text-text">
            <a href="{{ route('media.show', $item) }}" class="transition group-hover:text-text-brand">
                {{ $item->title }}
                <span class="absolute inset-0" aria-hidden="true"></span>
            </a>
        </h3>

        @if ($item->short_description)
            <p class="mt-2.5 line-clamp-3 text-sm leading-relaxed text-text-secondary">{{ $item->short_description }}</p>
        @endif

        <span class="link-arrow mt-5 pt-1">
            {{ __('Read more') }} <x-icon name="arrow-right" class="icon-arrow size-4" />
        </span>
    </div>
</article>