---
import BlogPost from "../layouts/Default.astro"
import { getAllPosts, getAllPages, getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
import type { InferGetStaticPropsType } from "astro";
import RecentBlogPosts from "../components/generic/RecentBlogPosts.astro";
import BlogPostHeader from "../components/blog/BlogPostHeader.astro";
import { Markup } from 'astro-remote';
import * as C from "../components/ghostrender";
import { Card } from "@eliancodes/brutal-ui";
import config from "virtual:@matthiesenxyz/astro-ghostcms/config";

const useRemote = config.ThemeProvider.astroRemote.enable;

export async function getStaticPaths() {
  const [posts, pages, settings] = await Promise.all([getAllPosts(), await getAllPages(), await getSettings()]);
  const allPosts = [...posts, ...pages];
  return allPosts.map((post) => ({
    params: { slug: post.slug },
    props: { post, posts, settings },
  }));
}

export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const {post, posts, settings} = Astro.props as Props;
invariant(settings, "Settings are required");
---
<BlogPost title={post.title} description={post.excerpt}>
  <article class='w-auto md:w-vmax p-10 poppins'>

  <Card>
    <BlogPostHeader post={post} settings={settings} />
  </Card>

  <div class="my-5"/>
  <div id="ghost">
    {useRemote ? <Markup 
      content={post.html} 
      sanitize={{ 
        allowComponents: true,
        allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'astrocard'],
      }}
      components={{ 
        h1: C.H1,
        h2: C.H2,
        h3: C.H3,
        h4: C.H4,
        h5: C.H5,
        h6: C.H6,
        p: C.Paragraph,
        astrocard: C.astrocard,
      }}
    /> : <Fragment set:html={post.html} />}
  </div>

  </article>
  <section class='p-6'>
    <RecentBlogPosts posts={posts} settings={settings} />
  </section>
</BlogPost>
