import { ITimeline, ITimelineItem } from './Timeline.interface'
import React, { Children } from 'react'
import {
  StyledTimeline,
  StyledTimelineBorder,
  StyledTimelineContent,
  StyledTimelineImage,
  StyledTimelineItem,
  StyledTimelineWrapper,
} from './Timeline.theme'

import Heading from '@/components/atoms/Heading/Heading.component'
import RichText from '@/components/atoms/RichText/RichText.component'

export const Timeline = ({ className, style, children }: ITimeline) => {
  let borders = [];

  if (children) {
    for (let index = 0; index < Children.count(children); index++) {
      borders.push(<StyledTimelineBorder></StyledTimelineBorder>)
    }
  }

  return (
    <StyledTimeline className={className} style={style}>
      {children}
    </StyledTimeline>
  )
}

export const TimelineItem = ({
  year,
  description,
  imageElement,
  className,
  style,
}: ITimelineItem) => {
  return (
    <StyledTimelineWrapper>
      <StyledTimelineItem
        className={className}
        style={style}
      >
        <StyledTimelineImage>
          {imageElement}
        </StyledTimelineImage>
        <StyledTimelineContent>
          <Heading tag='span' size="h2" className='fw-bold'>{year}</Heading>
          <RichText tag="p">{description}</RichText>
        </StyledTimelineContent>
      </StyledTimelineItem>
      <StyledTimelineBorder></StyledTimelineBorder>
      <StyledTimelineBorder></StyledTimelineBorder>
      <StyledTimelineBorder></StyledTimelineBorder>
      <StyledTimelineBorder></StyledTimelineBorder>
      <StyledTimelineBorder></StyledTimelineBorder>
    </StyledTimelineWrapper>
  )
}