---
import { getAllPosts } from '../../libs/posts.ts'
import Root from '../../layouts/Root.astro';
import Main from '../../layouts/Bundle.astro';
// @ts-ignore
import { Markdown } from '@astropub/md'
import { Image } from 'astro:assets';

export const getStaticPaths = async () => {
  const posts = getAllPosts();
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
};

const { post } = Astro.props;
---
<Root
  title={post.title}
  description={post.description}
  path={`/blog/${post.slug}/`}>
  <Main className="container content-space-t-3">
    <div class="w-lg-65 mx-lg-auto">
      <article class="border-bottom py-5 mb-5">
        <h1 class="h2 text-white text-center">{post.title}</h1><br>
        <Image
        class="card-img"
        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
        alt="Image placeholder"
        inferSize={true}
        />
        <div class="container content-space-1">
          <Markdown of={post.content}/>
        </div>
      </article>
    </div>
  </Main>
</Root>

<style is:global>
  img {
    width: 100%;
    height: fit-content;
    border-radius: 0.5rem;

    &:nth-child(1) {
      margin-block: 2rem;
    }
  }

  * {
    color: white;
  }

  h1,h2,h3,h4,h5,h6 {
    color: white !important;
  }
</style>