---
import { Markup } from "astro-remote";

import Layout from "../layouts/Layout.astro";
import BlogHeader from "../components/BlogHeader.astro";

const response = await fetch(
  `https://api.cosmicjs.com/v2/buckets/${
    import.meta.env.BUCKET_SLUG
  }/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${
    import.meta.env.BUCKET_READ_KEY
  }&limit=5`
);

const posts = await response.json();
---

<Layout title="Blog">
  <div>
    {
      posts.objects.map((post) => (
        <article>
          {post.thumbnail ? (
            <div style={{ marginBottom: "25px" }}>
              <img src={post.thumbnail} alt={`Thumbnail for ${post.title}`} />
            </div>
          ) : null}
          <div>
            <BlogHeader title={post.title} date={post.published_at} />
            <Markup content={`<p>${post.content.split("</p>")[0]}`} />
            <a href={`/posts/${post.slug}`}>Read More</a>
          </div>
        </article>
      ))
    }
    {posts.objects.length < 5 ? null : <a href="/archive">More Posts</a>}
  </div>
</Layout>