"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTimeline = PHXTimeline;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
function PHXTimeline({ data, keyRenderComponent, keyRenderValue }) {
    const renderValue = (component, item) => {
        const funcComponent = component[keyRenderValue];
        return funcComponent(item);
    };
    return (react_1.default.createElement("ul", { className: 'space-y-3' }, data.map((item, index) => (react_1.default.createElement("li", { key: item.id, className: 'relative flex items-center gap-x-3' },
        react_1.default.createElement("div", { className: (0, types_1.classNames)(index === data.length - 1 ? 'h-6' : '-bottom-6', index === 0 ? 'top-3' : 'top-0', 'absolute left-0 flex w-6 justify-center') },
            react_1.default.createElement("div", { className: 'w-px bg-gray-200' })),
        react_1.default.createElement("div", { className: 'relative flex h-6 w-6 flex-none items-center justify-center bg-white' },
            react_1.default.createElement("div", { className: 'h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300' })),
        react_1.default.createElement("div", { className: 'text-xs leading-5 text-gray-700' }, keyRenderComponent ? (renderValue(keyRenderComponent, item)) : (react_1.default.createElement("p", { className: 'flex-auto py-0.5' }, item[keyRenderValue]))))))));
}
//# sourceMappingURL=Timeline.js.map