'use client';
import { TimelineProps } from '@/src/types/timeline';
import { VerticalTimeline } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { TimelineElement } from '@/src/components/builder/timeline/TimelineElement';
import { getFilteredIcons } from '@/components/icons/FaIcons';
import Wrapper from '@/components/common/Wrapper';

export function TimelineCareer({ timelineData, styling, sectionId }: TimelineProps) {
  const mergedStyling = { align: 'center' as 'center' | 'start' | 'end', ...styling };

  let timelineAlign = '2-columns';
  if (mergedStyling.align === 'start') {
    timelineAlign = '1-column-left';
  } else if (mergedStyling.align === 'end') {
    timelineAlign = '1-column-right';
  }

  return (
    <Wrapper id={sectionId} styling={mergedStyling}>
      <VerticalTimeline layout={timelineAlign as '2-columns' | '1-column-left' | '1-column-right'}>
        {timelineData?.map((item) => (
          <TimelineElement
            key={crypto.randomUUID()}
            date={item.date}
            position={item.position}
            company={item.company}
            bullets={item.bullets}
            icon={getFilteredIcons(item.icon)[item.icon]}
            color={mergedStyling.color ?? 'var(--color-accent)'}
          />
        ))}
      </VerticalTimeline>
    </Wrapper>
  );
}
