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

interface TimelineProps
  extends ContentProps<Omit<ContentTree.Timeline, 'children'>> {}

/*
 * @description Timeline component is used to render a simple timeline of events.
 * @param children - The content to be displayed in the layout.
 */
const Timeline: React.FC<React.PropsWithChildren<TimelineProps>> = ({
  content: { title },
  children,
}) => {
  return (
    <ContentLayout>
      <div className="cp-timeline">
        {title && (
          <h3 className="cp-timeline__title o3-type-title-md">{title}</h3>
        )}
        {children}
      </div>
    </ContentLayout>
  )
}

export default Timeline