@props([
    'title' => __('home.blog.title'),
    'subtitle' => __('home.blog.subtitle'),
    'posts' => []
])

<!-- Our Blog -->
<section class="our-blog bgc-f7 pb30">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 offset-lg-3">
                <div class="main-title text-center">
                    <h2>{{ $title }}</h2>
                    <p>{{ $subtitle }}</p>
                </div>
            </div>
        </div>
        <div class="row">
            @forelse($posts as $post)
                <div class="col-md-6 col-lg-4 col-xl-4">
                    <x-frontend.blog-card
                        :image="asset( 'files/' . $post->featured_image )"
                        :category="$post->category ?? 'General'"
                        :title="$post->title"
                        :date="$post->published_at ? $post->published_at->format('d F Y') : 'N/A'"
                        :url="route('blog.show', $post->slug)"
                    />
                </div>
            @empty
                <div class="col-12">
                    <p class="text-center">No blog posts available at the moment.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>