<script setup lang="ts">
const props = defineProps<{
  content: string
}>();
const parser = useMarkdown();
const { data: ast, status, error } = await useAsyncData(`markdown`, () => parser(props.content));
</script>

<template>
  <Suspense>
    <div v-if="status === 'pending'" class="loading-circle"></div>
    <MDCRenderer v-else-if="status === 'success'" :body="ast?.body" :data="ast?.data" />
    <template v-else>
      <div>Impossible de traiter le contenu.</div>
      <pre> {{ error }} </pre>
    </template>
  </Suspense>
</template>