import { ContentTree } from '@financial-times/content-tree'
import React, { createContext, useContext } from 'react'
import { ContentProps } from '../../types'

export const ParagraphContext = createContext<{ className: string } | null>(
  null
)

interface ParagraphProps extends ContentProps<ContentTree.Paragraph> {}

const Paragraph: React.FC<React.PropsWithChildren<ParagraphProps>> = (
  props
) => {
  const { className } = useContext(ParagraphContext) ?? { className: undefined }

  return <p {...{ className }}>{props.children}</p>
}

export default Paragraph