import React from "react";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
const ProgressButtonItem = (props) => {
    var _a;
    const { translateString } = useTranslateValue();
    const translatedTitle = (_a = translateString(props.title)) !== null && _a !== void 0 ? _a : props.title;
    return (React.createElement("li", { className: "relative md:flex md:flex-1 ", id: props.id, key: props.id, onClick: () => {
            if (!props.isCompletedStep) {
                return props.onClick();
            }
        } },
        React.createElement("div", { className: `group flex w-full items-center ${props.isCompletedStep ? "" : "hover:bg-gray-50 cursor-pointer"}` },
            React.createElement("span", { className: "flex items-center px-6 py-4 text-sm font-medium" },
                props.isCompletedStep && (React.createElement("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800", style: { backgroundColor: props.color.toString() } },
                    React.createElement(Icon, { icon: IconProp.Check, className: "size-6 text-white" }))),
                props.isCurrentStep && (React.createElement("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-indigo-600", style: { borderColor: props.color.toString() } },
                    React.createElement("span", { className: "text-indigo-600", style: {
                            color: props.color.toString(),
                        } }, props.stepCount))),
                !props.isCompletedStep && !props.isCurrentStep && (React.createElement("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400", style: { borderColor: props.color.toString() } },
                    React.createElement("span", { className: "text-gray-500 group-hover:text-gray-900", style: { color: props.color.toString() } }, props.stepCount))),
                React.createElement("span", { className: "ml-4 text-sm font-medium text-gray-900", style: { color: props.color.toString() } }, translatedTitle))),
        !props.isLastStep && (React.createElement("div", { className: "absolute right-0 top-0 hidden h-full w-5 md:block", "aria-hidden": "true" },
            React.createElement("svg", { className: "size-full text-gray-300", viewBox: "0 0 22 80", fill: "none", preserveAspectRatio: "none" },
                React.createElement("path", { d: "M0 -2L20 40L0 82", vectorEffect: "non-scaling-stroke", stroke: "currentcolor", strokeLinejoin: "round" }))))));
};
export default ProgressButtonItem;
//# sourceMappingURL=ProgressButtonItem.js.map