'use client'

import { BlockNoteView } from '@blocknote/mantine'
import { useCreateBlockNote } from '@blocknote/react'
import { PartialBlock } from '@blocknote/core'
import '@blocknote/mantine/style.css'
import { useMemo } from 'react'

interface TopicContentProps {
  content: string
  contentRTE?: unknown
  className?: string
}

export function TopicContent({ content, contentRTE, className = '' }: TopicContentProps) {
  // Create an editor instance with initial content
  const editor = useCreateBlockNote({
    initialContent:
      contentRTE && Array.isArray(contentRTE) && contentRTE.length > 0
        ? (contentRTE as PartialBlock[])
        : ([{ type: 'paragraph', content: '' }] as PartialBlock[]),
  })

  // If we have rich text content, use BlockNote viewer
  if (contentRTE && Array.isArray(contentRTE) && contentRTE.length > 0) {
    return (
      <div className={`topic-content ${className}`}>
        <BlockNoteView editor={editor} editable={false} theme="light" />
      </div>
    )
  }

  // Fallback to rendering plain HTML content
  return (
    <div
      className={`topic-content prose prose-lg max-w-none 
        prose-headings:font-bold prose-headings:text-foreground
        prose-p:text-muted-foreground prose-p:leading-relaxed
        prose-a:text-primary prose-a:no-underline hover:prose-a:underline
        prose-strong:text-foreground prose-strong:font-semibold
        prose-code:bg-muted prose-code:px-2 prose-code:py-1 prose-code:rounded
        prose-pre:bg-muted prose-pre:border prose-pre:rounded-lg
        prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-muted/50
        prose-ul:text-muted-foreground prose-ol:text-muted-foreground
        prose-li:text-muted-foreground
        prose-img:rounded-lg prose-img:shadow-lg
        ${className}`}
      dangerouslySetInnerHTML={{ __html: content }}
    />
  )
}

export default TopicContent