import React from "react";
import Icon from "../Icon/Icon";
import Color from "../../../Types/Color";
const NumberedSteps = (props) => {
    const defaultColor = props.defaultColor || new Color("#6b7280"); // gray-500
    return (React.createElement("div", { className: "relative" }, props.steps.map((step, index) => {
        const color = step.color || defaultColor;
        const isLast = index === props.steps.length - 1;
        return (React.createElement("div", { key: index, className: "relative flex items-start pb-5 last:pb-0" },
            !isLast && (React.createElement("div", { className: "absolute left-4 top-10 w-px bg-gray-200", style: { height: "calc(100% - 1.5rem)" } })),
            React.createElement("div", { className: "relative flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center border-2 bg-white", style: { borderColor: color.toString() } }, step.icon ? (React.createElement(Icon, { icon: step.icon, className: "h-4 w-4", style: { color: color.toString() } })) : (React.createElement("span", { className: "text-sm font-medium", style: { color: color.toString() } }, index + 1))),
            React.createElement("div", { className: "ml-4 flex-1 pt-0.5" },
                React.createElement("h4", { 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 NumberedSteps;
//# sourceMappingURL=NumberedSteps.js.map