import { TimelineItem } from '@/src/types/timeline';
import { FaCircle } from 'react-icons/fa';
import { VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { useBuilder } from '@/src/components/builder/context/BuilderContext';

export function TimelineElement({ icon, date, position, company, bullets, color }: TimelineItem) {
  const { isPreview } = useBuilder();

  return (
    <VerticalTimelineElement
      className='vertical-timeline-element--work builder'
      visible={true}
      contentStyle={{
        background: color,
        color: 'var(--color-background)',
        visibility: 'visible',
      }}
      date={date}
      iconStyle={{
        background: color,
        color: 'var(--color-background)',
      }}
      icon={icon}
      intersectionObserverProps={{ rootMargin: '0px 0px 100px 0px' }}
    >
      <h3 className='vertical-timeline-element-title font-bold text-[var(--color-background)] text-[length:calc(var(--text-font-size-base)*1.1)]'>
        {position}
      </h3>
      <h4 className='vertical-timeline-element-subtitle font-bold text-[var(--color-background)] text-[length:calc(var(--text-font-size-base)*1.05)]'>
        {company}
      </h4>
      <ul className='mt-2 text-left'>
        {bullets.map((bullet, index) => (
          <li
            key={crypto.randomUUID()}
            className={`${isPreview ? 'animate-fade-in' : ''} text-[var(--color-background)] flex flex-row items-start gap-2 delay-[${index * 100}ms]`}
          >
            <FaCircle className='h-2 w-2 mt-1.5 flex-shrink-0' /> {bullet}
          </li>
        ))}
      </ul>
    </VerticalTimelineElement>
  );
}
