import './TimelineElement.scss'
import react, {Children, ReactNode} from 'react'

type TimelineElementProps = {
  children: react.ReactElement<any, react.JSXElementConstructor<any>>[]
}

function TimelineElement({ children } : TimelineElementProps) {
  let labels : ReactNode[] = []
  let cards : ReactNode[] = []
  Children.forEach(children, (c) => {
    if (c.type.name === "TimelineLabel") {
      labels.push(c)
    } else {
      cards.push(c)
    }
  });
  return (
    <li className='timeline-element'>
      <div className='timeline-element__category'>
        { labels }
      </div>
      <div className='timeline-element__info'>
        { cards }
      </div>
    </li>
  )
}

export default TimelineElement