---
import { format } from "date-fns";
import { Markup } from "astro-remote";

import Layout from "../layouts/Layout.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=10`
);

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>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <h4>{post.title}</h4>
              <h5>{`🗓️ ${format(
                new Date(post.published_at),
                "MMM do, y"
              )}`}</h5>
            </div>
            <Markup content={`<p>${post.content.split("</p>")[0]}`} />
            <a href={`/posts/${post.slug}`}>Read More</a>
          </div>
        </article>
      ))
    }
  </div>
</Layout>