import { TimelineProps } from '@/src/types/timeline';
import { getFilteredIcons } from '@/components/icons/FaIcons';
import Wrapper from '../../common/Wrapper';
import { getColor } from '@/src/utils/color';
import { useBuilder } from '@/src/components/builder/context/BuilderContext';
export function HorizontalTimeline({ timelineData, styling, sectionId }: TimelineProps) {
  const color = getColor(styling);
  const { isPreview } = useBuilder();

  return (
    <Wrapper id={sectionId} styling={styling}>
      <div className='relative'>
        <div
          className='absolute top-[7.5rem] left-0 right-0 h-px'
          style={{
            backgroundImage: `linear-gradient(to right, ${color}, transparent)`,
          }}
        />

        <div
          className='flex md:flex-row flex-col gap-6 md:overflow-x-auto pb-8 snap-x snap-mandatory'
          style={{ justifyContent: styling?.align }}
        >
          {timelineData?.map((item) => (
            <div
              key={crypto.randomUUID()}
              className={`timeline-item ${isPreview ? 'animate-fadeInUp' : ''} flex-shrink-0 w-auto md:w-[350px] snap-center`}
            >
              <div className='relative'>
                <div className='text-center mb-8'>
                  <div className='font-bold text-[length:calc(var(--text-font-size-base)*1.01)] text-[var(--color-text)]/70 mb-4 builder'>
                    {item.date}
                  </div>
                  <div
                    className='absolute left-1/2 -translate-x-1/2 w-8 h-8 
                    flex items-center justify-center
                    bg-[var(--color-background)] rounded-full 
                    shadow-lg border border-[var(--color-text)]/10
                    hover:scale-110 transition-transform duration-200 p-1
                    '
                    style={{ color: color }}
                  >
                    {getFilteredIcons(item.icon)[item.icon]}
                  </div>
                </div>

                <div
                  className='bg-[var(--color-background)] rounded-xl p-6 shadow-lg
                  hover:shadow-xl transition-shadow duration-200 mt-8
                  border border-[var(--color-text)]/10 items-start justify-start flex flex-col'
                >
                  <h1
                    className='font-bold text-[length:calc(var(--text-font-size-base)*1.1)] builder'
                    style={{ color: color }}
                  >
                    {item.position}
                  </h1>
                  <h2 className='text-[length:calc(var(--text-font-size-base)*1.05)] font-semibold text-[var(--color-text)]/90 mb-4 builder'>
                    {item.company}
                  </h2>
                  <div className='space-y-2'>
                    {item.bullets.map((bullet) => (
                      <div
                        key={crypto.randomUUID()}
                        className={`${isPreview ? 'bullet-point animate-fadeInLeft' : ''} flex items-start gap-2 text-base 
                        text-[var(--color-text)]/80 hover:text-[var(--color-text)] transition-colors text-left builder`}
                      >
                        <span className='mt-1' style={{ color: color }}>
                          •
                        </span>
                        <p className='flex-1 builder'>{bullet}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Wrapper>
  );
}
