<script>
  import DOMPurify from "dompurify";
  import { marked } from "marked";

  let { content = "" } = $props();

  marked.setOptions({ gfm: true, breaks: true });

  function renderMarkdown(value) {
    const rendered = marked.parse(value || "", { async: false });
    return DOMPurify.sanitize(typeof rendered === "string" ? rendered : "", {
      USE_PROFILES: { html: true },
      ADD_ATTR: ["target", "rel"]
    });
  }

  const html = $derived(renderMarkdown(content));
</script>

<div class="markdown-body">{@html html}</div>
