import type { ReactElement } from 'react'
import type { PreviewText } from './types'
import { cn } from '@/lib/utils'
import { renderMarkdown } from './markdown'
import { SegmentText } from './SegmentText'

/** 预览里的一段文字：着色的词按源码排版；Markdown 说明渲染成段落、列表、代码块。 */
export function TextPreview({ text, className }: { text: PreviewText, className?: string }): ReactElement {
  if ('markdown' in text)
    return <div className={cn('cr-markdown', className)} dangerouslySetInnerHTML={{ __html: renderMarkdown(text.markdown) }} />
  return (
    <p className={cn('cr-code', className)}>
      <SegmentText segments={text} />
    </p>
  )
}