'use server';
import React from "react";
import { fromAsyncCodeToHtml } from '@shikijs/markdown-it/async'
import MarkdownItAsync from 'markdown-it-async'
import { codeToHtml } from 'shiki' // Or your custom shorthand bundle
import './MarkdownStyles.css'

// Initialize MarkdownIt instance with markdown-it-async
const md = MarkdownItAsync()
md.use(
  fromAsyncCodeToHtml(
    // Pass the codeToHtml function
    codeToHtml,
    {
      themes: {
        light: 'night-owl',
        dark: 'github-dark',
      }
    }
  )
)

const MarkdownRenderer: React.FC<{ content: string }> = async ({ content }) => {
  const html = await md.renderAsync(content)
  // const html = await md.renderAsync('# Title\n```ts\nconsole.log("Hello, World!")\n```')

  return <div className="markdown-body">
    <div dangerouslySetInnerHTML={{__html: html}}></div>
  </div>;
};

export default MarkdownRenderer;