// @ts-nocheck
import { Code, Link } from '@heroui/react'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export const components = {
  a: ({ href, children }: { href: string; children: React.ReactNode }) => (
    <Link href={href} target="_blank" rel="noopener noreferrer">
      {children}
    </Link>
  ),
  // img: ({ src, alt }: { src: string; alt: string }) => <Image src={src} alt={alt} className="object-cover w-full h-full" />,
  h1: ({ children }: { children: React.ReactNode }) => <h1 className="text-2xl font-bold mb-2.5">{children}</h1>,
  h2: ({ children }: { children: React.ReactNode }) => <h2 className="text-xl font-semibold mb-2.5">{children}</h2>,
  h3: ({ children }: { children: React.ReactNode }) => <h3 className="text-lg font-medium mb-2.5">{children}</h3>,
  p: ({ children }: { children: React.ReactNode }) => <p className="mb-2.5 text-base">{children}</p>,
  ul: ({ children }: { children: React.ReactNode }) => <ul className="list-disc pl-6 mb-2.5">{children}</ul>,
  li: ({ children }: { children: React.ReactNode }) => <li className="mb-2">{children}</li>,
  code: ({ children }: { children: React.ReactNode }) => <Code size="sm" >{children}</Code>,
}

export function MarkdownRender({ children }: { children: React.ReactNode }) {
  return (
    <Markdown remarkPlugins={[remarkGfm]} components={components as any}>
      {children?.toString()}
    </Markdown>
  )
}
