import React from 'react';
import { ExperienceItem, Language } from '../types';
import { Calendar } from 'lucide-react';

interface Props {
  experience: ExperienceItem[];
  lang: Language;
}

const ExperienceList: React.FC<Props> = ({ experience, lang }) => {
  return (
    <div className="relative space-y-12">
      {/* Central Line */}
      <div className="absolute left-4 top-4 bottom-4 w-0.5 bg-slate-200 md:left-1/2 md:-ml-[1px]"></div>

      {experience.map((job, index) => (
        <div key={index} className={`relative flex flex-col md:flex-row gap-8 ${index % 2 === 0 ? 'md:flex-row-reverse' : ''} group`}>
          
          {/* Timeline Dot */}
          <div className="absolute left-4 -translate-x-1/2 top-6 w-4 h-4 rounded-full border-4 border-white bg-indigo-500 shadow-md z-10 md:left-1/2 transition-transform group-hover:scale-125 group-hover:bg-indigo-600"></div>

          {/* Date for Desktop (Opposite side) */}
          <div className="hidden md:block w-1/2 pt-4 px-8 text-right group-hover:text-indigo-600 transition-colors">
             <div className={`flex items-center gap-2 text-sm font-bold tracking-wider text-slate-400 uppercase ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
                {index % 2 !== 0 && <span>{job.period}</span>}
                <Calendar size={14} />
                {index % 2 === 0 && <span>{job.period}</span>}
             </div>
          </div>

          {/* Content Card */}
          <div className="ml-12 md:ml-0 md:w-1/2 md:px-8">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 group-hover:shadow-lg group-hover:border-indigo-100 transition-all duration-300 relative">
               {/* Mobile Date */}
               <div className="md:hidden text-xs font-bold text-indigo-500 mb-2 uppercase tracking-wide flex items-center gap-1">
                  <Calendar size={12} />
                  {job.period}
               </div>

              <h3 className="text-lg font-bold text-slate-900 group-hover:text-indigo-700 transition-colors">
                {job.company[lang]}
              </h3>
              <div className="text-sm font-semibold text-slate-500 mb-4">
                {job.role[lang]}
              </div>
              
              <ul className="space-y-3">
                {job.description.map((desc, i) => (
                  <li key={i} className="text-sm text-slate-600 leading-relaxed flex items-start gap-3">
                    <span className="mt-1.5 w-1.5 h-1.5 bg-indigo-400 rounded-full shrink-0"></span>
                    <span>{desc[lang]}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ExperienceList;