import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cn } from "../utils/cn.js";
const MinimalStepper = forwardRef(
  ({
    steps,
    currentStep,
    orientation = "horizontal",
    clickable = false,
    allowFutureSteps = false,
    onStepClick,
    className,
    ...props
  }, ref) => {
    const getStepState = (index) => {
      if (index < currentStep) return "completed";
      if (index === currentStep) return "current";
      return "upcoming";
    };
    const isStepClickable = (index) => {
      if (!clickable || !onStepClick) return false;
      if (allowFutureSteps) return true;
      return index <= currentStep;
    };
    const handleStepClick = (index) => {
      if (isStepClickable(index)) {
        onStepClick?.(index);
      }
    };
    const renderStepIndicator = (step, index, state) => {
      const isClickable = isStepClickable(index);
      const indicatorClasses = cn(
        "stepper-indicator rounded-full flex items-center justify-center transition-colors font-medium h-2 w-2 text-[0]",
        {
          "bg-gray-600": state === "completed" || state === "current",
          "bg-gray-200": state === "upcoming",
          "bg-destructive": step.error,
          "cursor-pointer hover:opacity-80": isClickable,
          "cursor-not-allowed opacity-50": clickable && !isClickable
        }
      );
      const indicatorElement = /* @__PURE__ */ jsx("div", { className: indicatorClasses });
      if (isClickable) {
        return /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: () => handleStepClick(index),
            className: "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 rounded-full",
            "aria-label": `${step.label} - ${state === "completed" ? "completed" : state === "current" ? "current step" : "upcoming"}`,
            children: indicatorElement
          }
        );
      }
      return indicatorElement;
    };
    return /* @__PURE__ */ jsx(
      "nav",
      {
        ref,
        "aria-label": "Progress",
        className: cn("w-full", className),
        ...props,
        children: /* @__PURE__ */ jsx(
          "ol",
          {
            className: cn(
              "flex",
              orientation === "horizontal" ? "flex-row justify-between" : "flex-col"
            ),
            children: steps.map((step, index) => {
              const state = getStepState(index);
              const isLast = index === steps.length - 1;
              const nextStepState = !isLast ? getStepState(index + 1) : null;
              return /* @__PURE__ */ jsx(
                "li",
                {
                  "aria-current": state === "current" ? "step" : void 0,
                  "aria-label": `${step.label} - ${state === "completed" ? "completed" : state === "current" ? "current step" : "upcoming"}`,
                  "aria-invalid": step.error ?? void 0,
                  className: cn(
                    "flex",
                    orientation === "horizontal" ? "flex-col items-center flex-1 relative" : "flex-row items-start relative pb-8 last:pb-0"
                  ),
                  children: /* @__PURE__ */ jsxs(
                    "div",
                    {
                      className: cn(
                        "flex",
                        orientation === "horizontal" ? "flex-col items-center w-full" : "flex-row items-start w-full"
                      ),
                      children: [
                        /* @__PURE__ */ jsx(
                          "div",
                          {
                            className: cn(
                              "flex flex-col items-center relative z-10",
                              orientation === "horizontal" ? "mb-2" : "shrink-0"
                            ),
                            children: /* @__PURE__ */ jsx("div", { className: "relative", children: renderStepIndicator(step, index, state) })
                          }
                        ),
                        !isLast && /* @__PURE__ */ jsx(
                          "div",
                          {
                            "aria-hidden": "true",
                            className: cn(
                              "stepper-connector absolute",
                              orientation === "horizontal" ? "left-1/2 -right-1/2 top-[3px] h-[2px]" : "left-[3px] top-1/2 -bottom-1/2 w-[2px]",
                              nextStepState === "completed" || nextStepState === "current" ? "bg-gray-600" : "bg-gray-200"
                            )
                          }
                        )
                      ]
                    }
                  )
                },
                index
              );
            })
          }
        )
      }
    );
  }
);
MinimalStepper.displayName = "MinimalStepper";
export {
  MinimalStepper
};
