import React from 'react'
import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
import classnames from 'classnames'
import { ContentProps } from '../../types'

interface PullquoteProps
  extends ContentProps<ContentTreeWorkarounds.Pullquote> {}

const Pullquote: React.FC<React.PropsWithChildren<PullquoteProps>> = ({
  content: { text, source },
  children,
}) => {
  const hasChildren = React.Children.count(children) > 0

  return (
    <blockquote
      className={classnames(
        'n-content-pullquote',
        'o3-editorial-typography-pullquote',
        {
          'n-content-pullquote--with-image': hasChildren,
          'n-content-pullquote--no-image': !hasChildren,
        }
      )}
      aria-hidden="true"
    >
      <p>{text}</p>
      <footer className="o3-editorial-typography-pullquote__author">
        {source}
      </footer>

      {children}
    </blockquote>
  )
}

export default Pullquote