import React from "react";
import Icon from "../Icon/Icon";
const VerticalFlowSteps = (props) => {
    return (React.createElement("div", { className: "relative" }, props.steps.map((step, index) => {
        const isLast = index === props.steps.length - 1;
        return (React.createElement("div", { key: index, className: "relative flex items-start pb-6 last:pb-0" },
            !isLast && (React.createElement("div", { className: "absolute left-4 top-10 w-px bg-gray-200", style: { height: "calc(100% - 1rem)" } })),
            React.createElement("div", { className: "relative flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center border border-gray-200 bg-white", style: { borderColor: `${step.iconColor.toString()}40` } },
                React.createElement(Icon, { icon: step.icon, className: "h-4 w-4", style: { color: step.iconColor.toString() } })),
            React.createElement("div", { className: "ml-4 flex-1" },
                React.createElement("p", { className: "text-sm font-medium text-gray-900" }, step.title),
                React.createElement("p", { className: "text-sm text-gray-500 mt-0.5" }, step.description))));
    })));
};
export default VerticalFlowSteps;
//# sourceMappingURL=VerticalFlowSteps.js.map