<script lang="ts">
  import { marked } from "marked";
  import { getBlockLayoutClasses } from "../../lib/block-layout";
  import type { MarkdownBlockData } from "../../lib/block-types";

  let { block, class: className = "" }: { block: MarkdownBlockData; class?: string } = $props();

  marked.setOptions({ gfm: true });
  const html = $derived(
    block.resolvedContent ??
    (block.content && typeof block.content === "string"
      ? (marked.parse(block.content) as string)
      : ""),
  );

  const alignClass = $derived(
    block.alignment === "center"
      ? "text-center"
      : block.alignment === "right"
        ? "text-right"
        : "text-left",
  );

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
</script>

<div
  class={layoutClasses}
  data-block-type="markdown"
  data-markdown-id={block.name}
  data-block-slug={block._slug}
>
  <div class="markdown max-w-none {alignClass} {className}">
    {@html html}
  </div>
</div>
