import React from 'react';

interface TimelineItem {
  id: string;
  title: string;
  description?: string;
  timestamp: string;
  icon?: React.ReactNode;
  color?: string;
}

interface TimelineProps {
  items: TimelineItem[];
}

const Timeline: React.FC<TimelineProps> = ({ items }) => {
  return (
    <div className="relative space-y-8 before:absolute before:inset-0 before:ml-5 before:-translate-x-px before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
      {items.map((item, index) => (
        <div key={item.id} className="relative flex items-start group">
          {/* Icon Circle */}
          <div className={`relative z-10 flex items-center justify-center w-10 h-10 rounded-full border-2 bg-white shadow-sm transition-colors duration-200 ${item.color || 'border-slate-300 group-hover:border-blue-500'}`}>
            {item.icon ? (
              <div className="flex items-center justify-center">
                {item.icon}
              </div>
            ) : (
              <div className="w-2 h-2 rounded-full bg-slate-400" />
            )}
          </div>

          {/* Content */}
          <div className="flex flex-col ml-4 pt-1">
            <div className="flex items-baseline gap-2">
              <h3 className="text-sm font-semibold text-slate-900 leading-none">
                {item.title}
              </h3>
              <span className="text-xs font-medium text-slate-400 whitespace-nowrap">
                {item.timestamp}
              </span>
            </div>
            {item.description && (
              <p className="mt-1 text-sm text-slate-600 leading-relaxed">
                {item.description}
              </p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Timeline;