import Wrapper from '@/components/common/Wrapper';
import { getFilteredIcons } from '@/components/icons/FaIcons';
import { TimelineProps } from '@/src/types/timeline';
import { getColor } from '@/src/utils/color';

export function DetailedCareer({ timelineData, styling, sectionId }: TimelineProps) {
  const color = getColor(styling);

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

        {timelineData?.map((item) => (
          <div key={crypto.randomUUID()} className='flex flex-col md:flex-row mb-16 group relative'>
            <div className='relative flex md:block mb-4 md:mb-0 w-[120px] md:w-[7.5rem]'>
              <div className='text-sm md:text-base font-medium md:font-bold md:text-right text-[var(--color-text)]/70 whitespace-nowrap pl-12 md:pl-0'>
                {item.date}
              </div>

              <div
                className='absolute 
                  left-4 md:left-[7.5rem] 
                  top-1/2 transform -translate-y-1/2 -translate-x-1/2 md:-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
                  group-hover:scale-110 transition-transform duration-200 p-[5px]
                  '
                style={{ color: color }}
              >
                {getFilteredIcons(item.icon)[item.icon]}
              </div>
            </div>

            <div className='w-full pl-8 md:pl-12'>
              <div
                className='bg-[var(--color-background)] rounded-xl p-5 md:p-6 shadow-lg
                hover:shadow-xl transition-shadow duration-200
                border border-[var(--color-text)]/10'
              >
                <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 mb-3 md:mb-4 builder'>
                  {item.company}
                </h2>
                <div className='space-y-2'>
                  {item.bullets.map((bullet) => (
                    <div
                      key={crypto.randomUUID()}
                      className='flex items-start gap-2 
                      text-[var(--color-text)]/80 hover:text-[var(--color-text)] transition-colors
                      text-left'
                    >
                      <span className='mt-1 flex-shrink-0 builder' style={{ color: color }}>
                        •
                      </span>
                      <p className='flex-1 text-left builder'>{bullet}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Wrapper>
  );
}
