import { Icon } from '../../Atoms/Icon/Icon';

export const Timeline = ({
  items = [],
  className = '',
  ...props
}) => {
  if (items.length === 0) return null;

  return (
    <div className={className} {...props}>
      <ol className="relative border-l border-gray-200">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={index} className={`mb-10 ml-6 ${isLast ? 'mb-0' : ''}`}>
              <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white" />
              <time className="mb-1 text-sm font-normal leading-none text-gray-400">
                {item.date}
              </time>
              <h3 className="text-lg font-semibold text-gray-900">{item.title}</h3>
              {item.description && (
                <p className="mb-4 text-base font-normal text-gray-500">
                  {item.description}
                </p>
              )}
              {item.icon && (
                <div className="absolute -left-8 top-0">
                  <Icon name={item.icon} className="h-6 w-6 text-gray-400" />
                </div>
              )}
            </li>
          );
        })}
      </ol>
    </div>
  );
};

export default Timeline;

