<script setup lang="ts">
import { computed } from "vue";
import { parseMarkdown } from "../notes/markdown";
import MarkdownInline from "./MarkdownInline.vue";

const props = defineProps<{ text: string }>();
const blocks = computed(() => parseMarkdown(props.text));
</script>

<template>
  <div class="space-y-1.5 break-words">
    <template v-for="(b, i) in blocks" :key="i">
      <h3 v-if="b.type === 'h1'" class="text-base font-bold"><MarkdownInline :tokens="b.inline ?? []" /></h3>
      <h4 v-else-if="b.type === 'h2'" class="text-sm font-bold"><MarkdownInline :tokens="b.inline ?? []" /></h4>
      <h5 v-else-if="b.type === 'h3'" class="text-sm font-semibold"><MarkdownInline :tokens="b.inline ?? []" /></h5>
      <blockquote
        v-else-if="b.type === 'quote'"
        class="whitespace-pre-wrap border-l-2 border-neutral-300 pl-2 text-neutral-600 dark:border-neutral-600 dark:text-neutral-400"
      >
        <MarkdownInline :tokens="b.inline ?? []" />
      </blockquote>
      <ul v-else-if="b.type === 'ul'" class="list-disc space-y-0.5 pl-5">
        <li v-for="(it, j) in b.items ?? []" :key="j"><MarkdownInline :tokens="it" /></li>
      </ul>
      <ol v-else-if="b.type === 'ol'" class="list-decimal space-y-0.5 pl-5">
        <li v-for="(it, j) in b.items ?? []" :key="j"><MarkdownInline :tokens="it" /></li>
      </ol>
      <pre
        v-else-if="b.type === 'pre'"
        class="overflow-x-auto whitespace-pre-wrap rounded-md bg-black/5 p-2 font-mono text-xs dark:bg-white/10"
        >{{ b.value ?? "" }}</pre
      >
      <p v-else class="whitespace-pre-wrap"><MarkdownInline :tokens="b.inline ?? []" /></p>
    </template>
  </div>
</template>
