import React from 'react';
import classNames from 'classnames';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { useNonNativeButtonAttrs } from '../hooks';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function VerticalTimelineItem({
  id,
  title,
  content,
  icon,
  iconClassName,
  testId = `vertical-timeline-item-${id}-wrapper`,
  onSelect,
  isDisabled = false,
  isSelected = false
}) {
  const isInteractive = onSelect && !isDisabled;
  const nonNativeButtonAttrs = useNonNativeButtonAttrs({
    isDisabled,
    onClick: () => onSelect?.(id),
    onKeyDown: () => onSelect?.(id)
  });
  return /*#__PURE__*/_jsxs("div", {
    id: id,
    "test-id": testId,
    className: classNames('vertical-timeline-item-wrapper', isInteractive && 'interactive', isSelected && 'selected', isDisabled && 'disabled', !!icon ? 'with-icons' : 'with-circles'),
    ...(isInteractive && nonNativeButtonAttrs),
    children: [!!icon ? /*#__PURE__*/_jsx("div", {
      className: classNames('vertical-timeline-icon'),
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        "test-id": `vertical-timeline-item-${id}-icon`,
        icon: icon,
        className: iconClassName
      })
    }) : /*#__PURE__*/_jsx("div", {
      className: "vertical-timeline-circle"
    }), /*#__PURE__*/_jsxs("div", {
      className: classNames('vertical-timeline-item'),
      children: [/*#__PURE__*/_jsx("div", {
        className: "vertical-timeline-item-title",
        children: title
      }), content]
    })]
  });
}