import { jsxs as o, jsx as t } from "react/jsx-runtime";
import { useState as c, useCallback as a } from "react";
import i from "../../../box/Box.js";
import v from "../../Stepper.js";
import r from "../../components/stepper-step/StepperStep.js";
import p from "../../../button/Button.js";
const j = () => {
  const [l, n] = c(0), [m, s] = c([]), S = a((e) => {
    n(e);
  }, []), d = a(() => {
    n((e) => Math.min(e + 1, 2));
  }, []), u = a(() => {
    n((e) => Math.max(e - 1, 0));
  }, []), f = a(() => {
    s((e) => e.includes(l) ? e : [...e, l]);
  }, [l]), h = a(() => {
    n(0), s([]);
  }, []);
  return /* @__PURE__ */ o(i, { className: "flex flex-col gap-[var(--spacing-6)] w-full", children: [
    /* @__PURE__ */ o(v, { type: "horizontal", mode: "navigation", activeSteps: l, onClick: S, completedSteps: m, children: [
      /* @__PURE__ */ t(r, { title: "Step 1" }),
      /* @__PURE__ */ t(r, { title: "Step 2" }),
      /* @__PURE__ */ t(r, { title: "Step 3" })
    ] }),
    /* @__PURE__ */ o(i, { className: "flex gap-[var(--spacing-5)] justify-between", children: [
      /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(p, { label: "Previous Step", onClick: u, variant: "secondary" }) }),
      /* @__PURE__ */ o(i, { className: "space-x-[var(--spacing-2)]", children: [
        /* @__PURE__ */ t(p, { label: "Reset", onClick: h, variant: "ghost" }),
        /* @__PURE__ */ t(p, { label: "Complete Current Step", onClick: f, variant: "outline" }),
        /* @__PURE__ */ t(p, { label: "Next Step", onClick: d, variant: "default" })
      ] })
    ] })
  ] });
};
export {
  j as default
};
//# sourceMappingURL=NavigableStepper.js.map
