"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VerticalTimelineItem = VerticalTimelineItem;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _fontAwesomeIcon = require("../font-awesome-icon");
var _hooks = require("../hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function VerticalTimelineItem({
  id,
  title,
  content,
  icon,
  iconClassName,
  testId = `vertical-timeline-item-${id}-wrapper`,
  onSelect,
  isDisabled = false,
  isSelected = false
}) {
  const isInteractive = onSelect && !isDisabled;
  const nonNativeButtonAttrs = (0, _hooks.useNonNativeButtonAttrs)({
    isDisabled,
    onClick: () => onSelect?.(id),
    onKeyDown: () => onSelect?.(id)
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    id: id,
    "test-id": testId,
    className: (0, _classnames.default)('vertical-timeline-item-wrapper', isInteractive && 'interactive', isSelected && 'selected', isDisabled && 'disabled', !!icon ? 'with-icons' : 'with-circles'),
    ...(isInteractive && nonNativeButtonAttrs),
    children: [!!icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)('vertical-timeline-icon'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        "test-id": `vertical-timeline-item-${id}-icon`,
        icon: icon,
        className: iconClassName
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "vertical-timeline-circle"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)('vertical-timeline-item'),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "vertical-timeline-item-title",
        children: title
      }), content]
    })]
  });
}