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

interface InNumbersProps extends ContentProps<ContentTree.InNumbers> {}

const Definition: React.FC<ContentProps<ContentTree.Definition>> = ({
  content: { term, description },
}) => {
  return (
    <div className="cp-in-numbers__definition">
      <dt className="cp-in-numbers__term n-content-heading-3 o3-editorial-typography-subheading">
        {term}
      </dt>
      <dd className="cp-in-numbers__description">{description}</dd>
    </div>
  )
}

/*
 * @description InNumbers component is used to render a list of numbers with a title.
 * @param content.title - Optional heading for the numbers section.
 * @param children - Rendered Definition components (passed by RichText).
 */
const InNumbers: React.FC<React.PropsWithChildren<InNumbersProps>> = ({
  content,
  children,
}) => {
  const { title } = content

  return (
    <ContentLayout dataComponent="cp-in-numbers">
      <div className="cp-in-numbers" data-trackable="in-numbers">
        {title && (
          <h3 className="n-content-heading-3 o3-editorial-typography-subheading cp-in-numbers__title">
            {title}
          </h3>
        )}
        <dl className="cp-in-numbers__definitions">{children}</dl>
      </div>
    </ContentLayout>
  )
}

export default InNumbers
export { Definition }