---
import { readSingleton } from '@directus/sdk';

import type { Post } from '@lib/directusTypes';

import BlogCard from '@components/cards/BlogCard.astro';
import LargeLinkCard from '@components/cards/LargeLinkCard.astro';
import directus from '@lib/directus';

interface Props {
  posts: Post[];
  title: string;
  subTitle?: string;
}

const global = await directus.request(readSingleton('site_global'));

const { posts, title, subTitle } = Astro.props;
---

<section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
  <div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
    <h1 class="smooth-reveal card-text-header block">
      {title}
    </h1>
    <div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
      <span class="card-text-header-description">
        {subTitle}
      </span>
    </div>
  </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {posts.map((b) => 
      <BlogCard post={b} />
      )}
      <div class="col-span-full">
        <LargeLinkCard
          title="All Posts"
          subTitle="Catch up on everything I've written"
          url="/all"
          logoLight={global.all_logoLight}
          logoDark={global.all_logoDark}
        />
      </div>
    </div>
</section>