import { useWidgetId, useWidget } from '../stores'
import { MarkdownUI } from './markdown-ui'
import type { MarkdownWidgetData } from './types'

/**
 * Stateful Markdown bridge — reads `data.content` (post-pipeline) from the
 * per-widget store and forwards it to the pure {@link MarkdownUI}. Sits
 * inside `<Widget.Provider>`.
 */
export function Markdown() {
  const id = useWidgetId()
  const content = useWidget(id, (s) => {
    const data = s.data as MarkdownWidgetData | undefined
    return data?.content ?? ''
  })
  return <MarkdownUI content={content} />
}