import React from 'react';

const VerticalTimeline = ({ timelineItems }) => {
  return (
    <ol className="relative border-l border-gray-200 dark:border-gray-700 px-8 py-6 ">
      {timelineItems?.map((item, index) => (
        <li key={index} className="mb-10">
          <span className="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
            <svg className="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
              {item.iconPath}
            </svg>
          </span>
          <h3 className="flex items-center mb-1 text-lg font-semibold  dark:text-white">
            {item.title}
            {item.badgeText && (
              <span className="bg-blue-100 text-blue-800 text-sm font-medium ml-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 ml-3">
                {item.badgeText}
              </span>
            )}
          </h3>
          <time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
            {item.date}
          </time>
          <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
            {item.description}
          </p>
          {item.link && (
            <a href={item.link.url} className="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-100 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">
              {item.link.text}
              {item.link.icon && (
                <svg className="w-3.5 h-3.5 ml-2.5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  {item.link.iconPath}
                </svg>
              )}
            </a>
          )}
        </li>
      ))}
    </ol>
  );
};

export default VerticalTimeline;