---
import Grid from '~/components/blog/Grid.astro';

import { getBlogPermalink } from '~/utils/permalinks';
import { findPostsByIds } from '~/utils/blog';

export interface Props {
  title?: string;
  allPostsText?: string;
  allPostsLink?: string | URL;
  information?: string;
  postIds: string[];
}

const {
  title = await Astro.slots.render('title'),
  allPostsText = 'View all posts',
  allPostsLink = getBlogPermalink(),
  information = await Astro.slots.render('information'),
  postIds = [],
} = Astro.props;

const posts = await findPostsByIds(postIds);
---

<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
  <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
    <div class="md:max-w-sm">
      {
        title && (
          <h2
            class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
            set:html={title}
          />
        )
      }
      {
        allPostsText && allPostsLink && (
          <a
            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 md:mb-0"
            href={allPostsLink}
          >
            {allPostsText} »
          </a>
        )
      }
    </div>

    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
  </div>

  <Grid posts={posts} />
</section>