import React, { FC, ReactNode } from 'react'

import { formatClassList, joinStrings } from '../../utils'


type TimelineContainertype = {
  children: ReactNode,
  className: string,
  [other:string]: unknown
}

const CONTAINER: string = `
  relative
  max-w-screen-xl
  mt-0
  mb-16
  mx-auto
`

const TimelineContainer:FC<TimelineContainertype> = ({
  children,
  className,
  ...other
}: TimelineContainertype) => {
  const containerClassList = formatClassList(
    className
      ? joinStrings(' ', CONTAINER, className)
      : CONTAINER
  )

  return (
    <div className={containerClassList} {...other}>
      {children}
    </div>
  )
}

export default TimelineContainer