@props(['post'])

<article class="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:shadow-md dark:border-slate-800 dark:bg-slate-900">
    @if ($post->cover_image_path)
        <img
            src="{{ Storage::url($post->cover_image_path) }}"
            alt=""
            loading="lazy"
            class="h-48 w-full object-cover"
        >
    @else
        <div class="flex h-48 w-full items-center justify-center bg-gradient-to-br from-brand-100 to-accent-100 dark:from-brand-900/40 dark:to-accent-900/30">
            <x-public.logo class="h-8 w-auto opacity-60" />
        </div>
    @endif

    <div class="flex flex-1 flex-col p-6">
        <time datetime="{{ $post->published_at->toDateString() }}" class="text-xs font-medium text-slate-400">
            {{ $post->published_at->format('M j, Y') }}
        </time>
        <h3 class="mt-2 text-lg font-semibold text-slate-900 dark:text-white">
            <a href="{{ route('blog.show', $post) }}" class="hover:text-brand-600 dark:hover:text-brand-400">
                {{ $post->title }}
            </a>
        </h3>
        <p class="mt-2 flex-1 text-sm text-slate-600 dark:text-slate-300">{{ $post->excerpt }}</p>
        <a href="{{ route('blog.show', $post) }}" class="mt-4 text-sm font-semibold text-brand-600 hover:text-brand-700 dark:text-brand-400">
            Read more &rarr;
        </a>
    </div>
</article>