import React from "react";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
const HorizontalStepChain = (props) => {
    const defaultLabel = props.defaultStepLabel || "Step";
    return (React.createElement("div", { className: "flex items-center flex-wrap gap-3" },
        props.steps.map((step, index) => {
            return (React.createElement(React.Fragment, { key: index },
                React.createElement("div", { className: "flex items-center space-x-3" },
                    React.createElement("div", { className: "w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-medium", style: { backgroundColor: step.color.toString() } }, step.stepNumber),
                    React.createElement("div", null,
                        React.createElement("p", { className: "text-sm font-medium text-gray-900" }, step.title),
                        React.createElement("p", { className: "text-xs text-gray-500" },
                            step.stepLabel || defaultLabel,
                            " ",
                            step.stepNumber,
                            " \u00B7",
                            " ",
                            step.description))),
                React.createElement(Icon, { icon: IconProp.ChevronRight, className: "h-4 w-4 text-gray-300 hidden sm:block" })));
        }),
        props.endStep && (React.createElement("div", { className: "flex items-center space-x-3" },
            React.createElement("div", { className: "w-10 h-10 rounded-full flex items-center justify-center", style: { backgroundColor: `${props.endStep.color.toString()}15` } },
                React.createElement(Icon, { icon: props.endStep.icon, className: "h-4 w-4", style: { color: props.endStep.color.toString() } })),
            React.createElement("div", null,
                React.createElement("p", { className: "text-sm font-medium text-gray-900" }, props.endStep.title),
                React.createElement("p", { className: "text-xs text-gray-500" }, props.endStep.description))))));
};
export default HorizontalStepChain;
//# sourceMappingURL=HorizontalStepChain.js.map