import React from 'react'

import { ContentTree } from '@financial-times/content-tree'

import { ContentProps } from '../../types'

interface BigNumberProps extends ContentProps<ContentTree.BigNumber> {}

/**
 * Renders a BigNumber component
 */
const BigNumber: React.FC<BigNumberProps> = ({
  content: { description, number },
}) => {
  return (
    <div className="o3-editorial-typography-big-number n-content-big-number">
      <div className="o3-editorial-typography-big-number__title">{number}</div>
      <div className="o3-editorial-typography-big-number__content">
        {description}
      </div>
    </div>
  )
}

export default BigNumber