"use client";

import * as React from "react";

import { cn } from "@/app/lib/utils";

interface StepperContextProps {
  direction?: "horizontal" | "vertical";
  activeStep?: number;
}

const StepperContext = React.createContext<StepperContextProps | undefined>(
  undefined
);

export const useStepperContext = () => {
  const context = React.useContext(StepperContext);
  if (!context) {
    throw new Error("useStepperContext must be used within a StepperProvider");
  }
  return context;
};

interface StepperProviderProps extends React.PropsWithChildren<object> {
  direction?: "horizontal" | "vertical";
  activeStep?: number;
}

const StepperProvider: React.FC<StepperProviderProps> = ({
  direction = "horizontal",
  activeStep = 1,
  children,
}) => {
  return (
    <StepperContext.Provider value={{ direction, activeStep }}>
      {children}
    </StepperContext.Provider>
  );
};

interface StepperProps extends React.ComponentProps<"div"> {
  direction?: "horizontal" | "vertical";
  activeStep?: number;
  className?: string;
}

const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
  (
    { direction = "horizontal", activeStep = 1, className, children, ...props },
    ref
  ) => {
    return (
      <StepperProvider direction={direction} activeStep={activeStep}>
        <div
          ref={ref}
          className={cn(
            "relative flex justify-center",
            direction === "horizontal"
              ? "flex-row items-center"
              : "flex-col items-start",
            className
          )}
          {...props}
        >
          {children}
        </div>
      </StepperProvider>
    );
  }
);
Stepper.displayName = "Stepper";

interface StepperItemProps extends React.ComponentProps<"div"> {
  stepIndex: number;
  isLastStep?: boolean;
  className?: string;
}

const StepperItem = React.forwardRef<HTMLDivElement, StepperItemProps>(
  ({ stepIndex, isLastStep, className, children, ...props }, ref) => {
    const { direction, activeStep = 1 } = useStepperContext();
    const isActive = stepIndex === activeStep;
    const isCompleted = stepIndex < activeStep;

    return (
      <div
        ref={ref}
        className={cn(
          `relative flex flex-1 justify-center items-center gap-2`,
          direction === "horizontal" ? "flex-col px-1.5" : "flex-row py-1.5",
          className
        )}
        {...props}
      >
        <div
          className={`size-4 border rounded-full flex justify-center items-center
            ${isActive ? "border-blue-300" : ""}
            ${isCompleted ? "border-green-300" : ""}
            ${!isActive && !isCompleted ? "border-neutral-300" : ""}
          `}
        >
          <span
            className={`size-3 rounded-full block
              ${isActive ? "bg-blue-500" : ""}
              ${isCompleted ? "bg-green-500" : ""}
              ${!isActive && !isCompleted ? "bg-grayscale-surface-hover" : ""}
            `}
          ></span>
        </div>

        <p className="text-grayscale-textIcon-body leading-4 text-sm font-medium">
          {children}
        </p>

        {!isLastStep && (
          <div
            className={`
              absolute rounded-full ${direction === "horizontal" ? "h-[1.5px] top-2 left-[calc(50%+16px)] -right-[calc(50%-16px)]" : "w-[1.5px] left-2 top-[calc(50%+16px)] -bottom-[calc(50%-16px)]"}
              ${isCompleted ? "bg-green-400" : "bg-grayscale-surface-hover"}
            `}
          ></div>
        )}
      </div>
    );
  }
);
StepperItem.displayName = "StepperItem";

export { Stepper, StepperItem };
Components

Set up your wallet
