import React from 'react';
import classNames from 'classnames';
import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
import { VerticalTimelineItem } from './vertical-timeline-item';
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_ICON = faPen;

/**
 * VerticalTimeline component.
 * @uxr-only-supported
 */
export function VerticalTimeline({
  items = [],
  testId,
  onSelect,
  selected,
  withIcons,
  className
}) {
  return /*#__PURE__*/_jsx("div", {
    "test-id": testId,
    className: classNames('vertical-timeline', className),
    children: items.map(item => {
      return /*#__PURE__*/_jsx(VerticalTimelineItem, {
        ...item,
        icon: withIcons ? item.icon || DEFAULT_ICON : undefined,
        onSelect: onSelect,
        isSelected: selected !== undefined && selected === item.id
      }, item.id);
    })
  });
}