<article class="group flex flex-col bg-white dark:bg-surface-dark rounded-xl border border-border-light dark:border-border-dark overflow-hidden hover:shadow-soft-hover transition-all">
    <div class="aspect-video overflow-hidden">
        <a href="{{ route('blog.post', $post->slug) }}" class="block w-full h-full">
            @if(!$post->hasFeaturedImage())
                <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="{{asset('/assets/img/no-thumb.svg')}}" alt="{{$post->title}}">
            @else
                <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="{{$post->getFeaturedImage()}}" alt="{{$post->title}}">
            @endif
        </a>
    </div>
    <div class="p-6 flex flex-col flex-grow">
        <div class="flex items-center justify-between mb-4">
            @if($post->category->first())
                <span class="text-xs font-bold text-primary px-2 py-1 bg-primary/5 rounded uppercase">
                    {{ $post->category->first()->name }}
                </span>
            @endif
            <span class="text-xs text-text-muted">{{ $post->readTime }} min read</span>
        </div>
        <h3 class="text-xl font-bold text-text-main dark:text-white mb-3 group-hover:text-primary transition-colors leading-tight">
            <a href="{{ route('blog.post', $post->slug) }}">
                {{ $post->title }}
            </a>
        </h3>
        <p class="text-sm text-text-muted dark:text-gray-400 mb-6 line-clamp-3">
            {{ Str::limit(strip_tags($post->content), 120) }}
        </p>
        <div class="mt-auto flex items-center justify-between pt-4 border-t border-border-light dark:border-border-dark">
            <span class="text-xs text-text-muted">{{ $post->created_at->format('M d, Y') }}</span>
            <a href="{{ route('blog.post', $post->slug) }}" class="text-sm font-semibold text-primary hover:underline">
                @lang('general.Read More')
            </a>
        </div>
    </div>
</article>
