import type { MarkdownUIProps } from './types'
import type { MarkdownWidgetData } from './types'
import { MarkdownUI } from '.'
import { useWidgetSelector } from '../stores/use-widget-selector'

/**
 * Stateful markdown widget component that reads content from the widget store and renders it as formatted rich text.
 */
export function Markdown({ id }: MarkdownUIProps) {
  const content = useWidgetSelector(
    id,
    (w) => (w?.data as MarkdownWidgetData | undefined)?.content,
  )

  if (!content) {
    return null
  }

  return <MarkdownUI>{content}</MarkdownUI>
}