import { jsx as e, jsxs as t } from "react/jsx-runtime";
import { useCallback as m, useMemo as u } from "react";
import f from "../../StepperLayout.js";
import g from "../../hooks/useStepperLayoutState.js";
import i from "../../../box/Box.js";
import s from "../../../text/Text.js";
import x from "../../../button/Button.js";
const v = [
  { title: "Required Fields", description: "Mandatory data entry" },
  { title: "Optional Data", description: "Additional information" },
  { title: "Confirmation", description: "Review and confirm" },
  { title: "Complete", description: "Finished" }
], w = ["error", "warning", "completed", void 0], T = () => {
  const { steps: c, activeStep: a, goNext: o, goBack: p, reset: r, setStepStatus: n } = g(v), d = m(
    (l) => {
      n(l, w[l]), o();
    },
    [n, o]
  ), h = u(
    () => [
      /* @__PURE__ */ e(i, { className: "flex flex-col gap-[var(--spacing-4)]", children: /* @__PURE__ */ t(s, { children: [
        "Click Next — this step will be marked ",
        /* @__PURE__ */ e("strong", { children: "status: 'error'" }),
        " in the stepper header, but navigation still advances. Error status is typically set when validation fails; here it is assigned unconditionally to demonstrate the visual."
      ] }) }, "step-0"),
      /* @__PURE__ */ e(i, { className: "flex flex-col gap-[var(--spacing-4)]", children: /* @__PURE__ */ t(s, { children: [
        "Click Next — this step will be marked ",
        /* @__PURE__ */ e("strong", { children: "status: 'warning'" }),
        ". Warning means the step had an issue but navigation was still allowed. Notice step 0 retains its error badge in the header."
      ] }) }, "step-1"),
      /* @__PURE__ */ e(i, { className: "flex flex-col gap-[var(--spacing-4)]", children: /* @__PURE__ */ t(s, { children: [
        "Click Next — this step will be marked ",
        /* @__PURE__ */ e("strong", { children: "status: 'completed'" }),
        ". This is an explicit override; without it the step would auto-derive completed because it is before the active index. Use the explicit value when you need to force completed regardless of position."
      ] }) }, "step-2"),
      /* @__PURE__ */ t(i, { className: "flex flex-col gap-[var(--spacing-4)]", children: [
        /* @__PURE__ */ e(s, { children: "All steps have explicit statuses visible in the stepper header: error → warning → completed → (this step, no override). Navigate back to confirm that statuses persist — they are not cleared on Back." }),
        /* @__PURE__ */ e(x, { label: "Reset", variant: "outline", onClick: r })
      ] }, "step-3")
    ],
    [r]
  );
  return /* @__PURE__ */ e(f, { steps: c, activeStep: a, onNext: d, onBack: p, children: h[a] });
};
export {
  T as default
};
//# sourceMappingURL=StatusShowcase.js.map
