@props(['post'])

<article {{ $attributes->merge(['class' => 'overflow-hidden rounded-2xl border border-lime-100 dark:border-slate-800 bg-white dark:bg-slate-900']) }}>
    @if ($post->coverImageUrl())
        <a href="{{ route('blog.show', $post->slug) }}">
            <img src="{{ $post->coverImageUrl() }}" alt="{{ $post->title }}" class="h-52 w-full object-cover">
        </a>
    @else
        <div class="h-52 w-full bg-lime-50 dark:bg-slate-800"></div>
    @endif
    <div class="p-5">
        <div class="flex flex-wrap items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
            <span>{{ $post->published_at?->format('M d, Y') }} • {{ $post->author?->name ?? 'Admin' }}</span>
            @if ($post->relationLoaded('category') && $post->category)
                <a href="{{ route('blog.category', $post->category->slug) }}" class="rounded-full bg-lime-100 dark:bg-lime-900/40 px-2 py-0.5 text-lime-800 dark:text-lime-300 hover:underline">
                    {{ $post->category->name }}
                </a>
            @endif
        </div>
        <h2 class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100 line-clamp-2">
            <a href="{{ route('blog.show', $post->slug) }}" class="hover:text-lime-700 dark:hover:text-lime-400 transition-colors">
                {{ $post->title }}
            </a>
        </h2>
        <p class="mt-2 text-[15px] leading-relaxed text-slate-600 dark:text-slate-300 line-clamp-3 font-serif">
            {{ $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 140) }}
        </p>
        <a href="{{ route('blog.show', $post->slug) }}" class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-lime-700 dark:text-lime-400 hover:underline">
            Read post
            <i class="fas fa-arrow-right text-xs"></i>
        </a>
    </div>
</article>
