<script setup lang="ts">
import ProseA from "~/components/content/prose/ProseA.vue";
import ProseH1 from "~/components/content/prose/ProseH1.vue";
import ProseH2 from "~/components/content/prose/ProseH2.vue";
import ProseH3 from "~/components/content/prose/ProseH3.vue";
import ProseH4 from "~/components/content/prose/ProseH4.vue";
import ProseH5 from "~/components/content/prose/ProseH5.vue";
import ProseH6 from "~/components/content/prose/ProseH6.vue";
import ProseBlockquote from "~/components/content/prose/ProseBlockquote.vue";
const props = defineProps<{
  content: string
}>();
const parser = useMarkdown();
const ast = await parser(props.content);
</script>

<template>
  <Suspense>
    <template #fallback>
      <div class="loading"></div>
    </template>
    <MDCRenderer :body="ast?.body" :data="ast?.data" :components="{
      a: ProseA,
      h1: ProseH1,
      h2: ProseH2,
      h3: ProseH3,
      h4: ProseH4,
      h5: ProseH5,
      h6: ProseH6,
      blockquote: ProseBlockquote,
    }" />
  </Suspense>
</template>