import { jsx as r, jsxs as m } from "@emotion/react/jsx-runtime";
import { StepAreaStyled as y, StepStyled as b, StepNameStyled as f, StepNameTextStyled as h } from "../../slots/StepperSlot.js";
import { Indicator as u } from "./subcomponents/Inidicator/index.js";
import { useStepArea as x } from "./hooks/useStepArea.js";
import { useVisibileSteps as k } from "./hooks/useVisibileSteps.js";
function j() {
  const { visibleSteps: t } = k(), { handleStepClick: a, visibleTitle: s, orientation: S, steps: d, currentStep: n } = x({ visibleSteps: t }), o = {
    visibleTitle: s,
    orientation: S,
    totalSteps: t.length
  };
  return /* @__PURE__ */ r(y, { ownerState: o, children: d.map((i, l) => {
    const e = t.findIndex((c) => c.key === i.key), p = e !== -1;
    return /* @__PURE__ */ m(
      b,
      {
        role: "button",
        onClick: () => p ? a(e) : void 0,
        ownerState: {
          ...o,
          currentStep: n,
          step: e,
          // Usa el índice en la secuencia visible
          isStepVisible: p
        },
        "data-testid": `stepper-step-${i.key}`,
        children: [
          s && /* @__PURE__ */ r(
            f,
            {
              variant: "bodyStandard",
              ownerState: {
                ...o,
                currentStep: n,
                step: e,
                originalStepIndex: l,
                isStepVisible: p
              },
              children: /* @__PURE__ */ r(h, { ownerState: { orientation: S }, children: i.title })
            }
          ),
          /* @__PURE__ */ r(
            u,
            {
              currentStep: n,
              step: e,
              totalSteps: t.length,
              originalStepIndex: l
            }
          )
        ]
      },
      i.key
    );
  }) });
}
export {
  j as StepArea
};
