export function Timeline({
  items,
}: {
  items: { description: string; title: string }[];
}) {
  return (
    <div className="grid gap-4">
      {items.map((item, index) => (
        <div className="flex gap-3" key={`${item.title}-${index}`}>
          <div className="flex flex-col items-center">
            <span className="h-3 w-3 rounded-full bg-[var(--uhuru-action-primary)]" />
            {index < items.length - 1 ? (
              <span className="mt-2 h-full w-px bg-[var(--uhuru-border-subtle)]" />
            ) : null}
          </div>
          <div className="pb-5">
            <p className="m-0 text-sm font-medium text-[var(--uhuru-text-primary)]">{item.title}</p>
            <p className="mt-1 mb-0 text-sm leading-6 text-[var(--uhuru-text-secondary)]">{item.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}