import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Spacing from "../Spacing";
import Styles from "./ProgressTexts.module.scss";
import Button from "../Button";
/**
 * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
 **/
/**
 * This component shows a sequence of steps with titles, descriptions, and optional buttons.
 * It highlights the current step and fades out previous ones, helping users follow along as they progress through a process.
 **/
export default function ProgressTexts({ steps, currentStep, spacingOnEachStep = true, }) {
    const _currentStep = steps[currentStep];
    return (_jsx(_Fragment, { children: steps.map((s, i) => {
            function whichClassToUse(step, stepType, currentStep, currentStepType) {
                const classes = [Styles.container];
                // Decides the color
                if (stepType !== "final")
                    classes.push(step < currentStep ? Styles.disabled : Styles.loading);
                // Decides if should be visible or not
                classes.push(currentStep !== step && currentStepType === "final"
                    ? Styles.hidden
                    : "");
                return classes.join(" ");
            }
            return i <= currentStep ? (_jsxs("div", { ref: (a) => {
                    if (a)
                        a.style.maxHeight = `${a.scrollHeight}px`;
                }, className: whichClassToUse(i, s.type, currentStep, _currentStep.type), children: [s.title && _jsx("h1", { children: s.title }), s.description && _jsx("p", { children: s.description }), s.action && (_jsx(Button, { variant: s.action.variant, onClick: s.action.onClick, disabled: s.action.disabled, children: s.action.label })), spacingOnEachStep !== false ? _jsx(Spacing, { size: "large" }) : null] }, String(i))) : null;
        }) }));
}
//# sourceMappingURL=ProgressTexts.js.map