---
import type { Post } from '@lib/directusTypes';
import BlogCard from '@components/blog/BlogCard.astro';

interface Props {
  posts: Post[];
}

const { posts } = Astro.props;
---

<section class="mx-auto mb-10 max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 2xl:max-w-full">
  <div class="text-left">
    <h2
      id="selected-articel"
      class="smooth-reveal-2 mb-4 text-5xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
    >
      Older Articles
    </h2>
  </div>

  <div class="flex flex-col md:flex-row md:space-x-12 lg:space-x-16">
    <div class="w-full">
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((b) => <BlogCard post={b} />)}
      </div>
    </div>
  </div>
</section>