import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { readString } from './data'
import type { BlockProps } from './types'

export function TextBlock({ data }: BlockProps) {
	const text = readString(data, 'text', 'body', 'content')

	if (text === undefined || text.trim() === '') {
		return null
	}

	return (
		<div className="prose-logbuch">
			<Markdown
				remarkPlugins={[remarkGfm]}
				components={{ a: props => <a {...props} rel="noreferrer" /> }}
			>
				{text}
			</Markdown>
		</div>
	)
}