'use client'

import PropTypes from 'prop-types'
import dynamic from 'next/dynamic'
import Typography from '@mui/material/Typography'
import {useTheme} from '@mui/material/styles'

const MarkdownPreview = dynamic(
  () => import('@uiw/react-markdown-preview').then(mod => mod.default),
  {ssr: false}
)

export default function MarkdownRenderer({content, color, fallbackComponent: FallbackComponent = Typography}) {
  const theme = useTheme()

  // Check if content contains markdown syntax
  const hasMarkdown = content && (
    content.includes('**')
    || content.includes('*')
    || content.includes('#')
    || content.includes('[')
    || content.includes('`')
    || content.includes('> ')
    || content.includes('- ')
    || content.includes('1. ')
  )

  if (!hasMarkdown) {
    // Fallback to original rendering for plain text
    const formattedContent = content.replaceAll('\n', '<br />')
    return <FallbackComponent dangerouslySetInnerHTML={{__html: formattedContent}} />
  }

  const textColor = color || theme.palette.text.primary

  return (
    <div
      style={{
        backgroundColor: 'transparent',
        color: textColor
      }}
      data-color-mode={theme.palette.mode}
    >
      <MarkdownPreview
        source={content}
        style={{
          backgroundColor: 'transparent',
          color: textColor,
          fontSize: 'inherit',
          fontFamily: 'inherit'
        }}
      />
    </div>
  )
}

MarkdownRenderer.propTypes = {
  content: PropTypes.string.isRequired,
  color: PropTypes.string,
  fallbackComponent: PropTypes.elementType
}