import React from 'react';
import Text from '../Text';
import { classes, st, vars } from './TimelineItem.st.css.js';
import { dataHooks } from './Timeline.constants';
import { isString } from '../utils/StringUtils';
/** A timeline item is a display of a timeline event */
function TimelineItem({ idx, item, dataHook, gap, skin = 'dark', }) {
    const { customPrefix, suffix, label, labelAction, line = 'filled' } = item;
    return (React.createElement("li", { className: st(classes.event, { skin }), "data-hook": dataHook },
        React.createElement(React.Fragment, null,
            React.createElement("div", { className: classes.prefix },
                customPrefix ? (React.createElement("div", { "data-hook": `${dataHooks.timelineBulletIndicator}-${idx}` }, customPrefix)) : (React.createElement("div", { "data-hook": `${dataHooks.timelineDefaultPrefix}-${idx}`, className: classes.defaultIndicator })),
                React.createElement("div", { className: st(classes.line, { line }) })),
            React.createElement("div", { className: st(classes.label, { withSuffix: !!suffix }), style: { [vars.marginBottom]: gap } },
                isString(label) ? (React.createElement(Text, { dataHook: `${dataHooks.timelineLabel}-${idx}`, weight: "thin", size: "small", className: classes.labelText }, label)) : (label),
                labelAction ? (React.createElement("div", { className: classes.labelAction, "data-hook": `${dataHooks.timelineLabelAction}-${idx}` }, labelAction)) : null),
            suffix ? (React.createElement("div", { className: classes.suffix, "data-hook": `${dataHooks.timelineSuffix}-${idx}` }, isString(suffix) ? (React.createElement(Text, { dataHook: `${dataHooks.timelineTextSuffix}-${idx}`, weight: "thin", light: true, secondary: true, size: "small" }, suffix)) : (suffix))) : null)));
}
TimelineItem.displayName = 'TimelineItem';
export default TimelineItem;
//# sourceMappingURL=TimelineItem.js.map