import React from "react";
import { cn } from "@/shared/lib/utils";

interface StepperProps {
  steps: {
    title: string;
    description: string;
  }[];
  currentStep: number;
  setCurrentStep: (step: number) => void;
  disabled?:boolean;
}

export const Stepper = ({
  steps,
  currentStep,
  setCurrentStep,
  disabled = false
}: StepperProps) => {
  return (
    <div className="w-full">
      <div className="flex justify-between">
        {steps.map((step, index) => (
          <div
            key={index}
            className={cn(
              "flex flex-col items-center flex-1",
              index < steps.length - 1 && "relative"
            )}>
            <button
              type="button"
              onClick={() => {
                 if (
                   !disabled &&
                   (index < currentStep || index === currentStep)
                 ) {
                   setCurrentStep(index);
                 }}}
                 disabled={disabled || index > currentStep}
              className={cn(
                "flex items-center justify-center w-10 h-10 rounded-full border-2 transition-colors duration-300",
                currentStep >= index
                  ? "bg-primary-500 border-primary-600 text-white" // Active step (green)
                  : "bg-white border-gray-300 text-gray-500" // Inactive step
              )}>
              {index + 1}
            </button>
            <div className="mt-2 text-center">
              <p
                className={cn(
                  "text-sm font-medium",
                  currentStep >= index
                    ? "text-primary-600" // Active title (darker green)
                    : "text-gray-500" // Inactive title
                )}>
                {step.title}
              </p>
              <p
                className={cn(
                  "text-xs",
                  currentStep >= index ? "text-primary-500" : "text-gray-400"
                )}>
                {step.description}
              </p>
            </div>
            {index < steps.length - 1 && (
              <div
                className={cn(
                  "absolute top-5 left-1/2 w-full h-0.5 -z-10",
                  currentStep > index ? "bg-primary-400" : "bg-gray-200"
                )}
              />
            )}
          </div>
        ))}
      </div>
    </div>
  );
};
