import { createMemo } from "solid-js";
import { marked } from "marked";

interface MarkdownPreviewProps {
  content: string;
}

export default function MarkdownPreview(props: MarkdownPreviewProps) {
  const html = createMemo(() => marked.parse(props.content || ""));

  return (
    <div
      class="prose prose-stone max-w-none text-sm leading-7 [&_h1]:text-2xl [&_h1]:font-extrabold [&_h2]:text-xl [&_h2]:font-bold [&_ul]:pl-5"
      innerHTML={String(html())}
    />
  );
}

