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

const Heading: React.FC<
  React.PropsWithChildren<ContentProps<ContentTree.Heading>>
> = (props) => {
  if (!React.Children.count(props.children)) return null

  const { fragmentIdentifier } = props.content

  switch (props.content.level) {
    case 'chapter':
      return (
        <h2
          id={fragmentIdentifier}
          className="n-content-heading-2 o3-editorial-typography-chapter"
        >
          {props.children}
        </h2>
      )
    case 'subheading':
      return (
        <h3
          id={fragmentIdentifier}
          className="n-content-heading-3 o3-editorial-typography-subheading"
        >
          {props.children}
        </h3>
      )
    case 'label':
      return (
        <h5
          id={fragmentIdentifier}
          className="n-content-heading-5 o3-type-label"
        >
          {props.children}
        </h5>
      )
  }
}

export default Heading