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

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

const { slug } = Astro.params;

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=20&slug=${slug}`
);

const posts = await response.json();
const post = posts.objects[0];
---

<Layout title={post.title}>
  <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={post.content} />
    </div>
  </article>
</Layout>