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

interface TimelineEventProps
  extends ContentProps<Omit<ContentTree.TimelineEvent, 'children'>> {}

/*
 * @description Event component is used to render a single event.
 */
const TimelineEvent: React.FC<React.PropsWithChildren<TimelineEventProps>> = ({
  content: { title },
  children,
}) => {
  return (
    <div className="cp-timeline-event">
      <h5 className="cp-timeline-event__heading o3-type-label">
        <span className="cp-timeline-event__heading-title">{title}</span>
      </h5>
      {children}
    </div>
  )
}

export default TimelineEvent