import React from "react";
import activeStepper from "../../assets/images/active-stepper.png";

interface Step {
  key: string | number;
  label: string;
  disabled?: boolean;
}

interface StepperProps {
  steps: Step[];
  activeStep: string | number;
}

export const Stepper: React.FC<StepperProps> = ({ steps, activeStep }) => {
  return (
    <div className="w-full px-4 overflow-x-auto overflow-y-hidden select-none">
      <div className="relative min-w-[300px]">
        <div className="absolute left-0 right-0 top-1/2 h-[0.5px] bg-primary-800">
          <div className="h-1 transition-all duration-300"></div>
        </div>

        <div className="relative flex justify-between sm:justify-center sm:gap-20 md:gap-25 lg:gap-30">
          {steps.map((step) => {
            const isActive = step.key === activeStep;

            return (
              <div
                key={step.key}
                className={`flex flex-col items-center px-2 sm:px-0`}
              >
                <div
                  className={`relative z-10 flex h-6 w-6 sm:h-7 sm:w-7 items-center justify-center  mt-[25px] bg-white dark:bg-gray-900 rounded-full ${
                    step?.disabled ? "border-gray-200" : "border-gray-300"
                  } ${!isActive && "border-1  dark:border-white2-600"}`}
                >
                  {isActive ? (
                    <img
                      src={activeStepper}
                      alt="Active step"
                      className="h-full"
                    />
                  ) : (
                    <span
                      className={`text-sm font-medium  dark:text-white p-2 sm:p-3 `}
                    ></span>
                  )}
                </div>

                <div
                  className={`mt-2 text-center text-xs sm:text-sm font-medium whitespace-nowrap ${
                    step?.disabled
                      ? "text-gray-300 dark:text-gray-100 "
                      : "text-white1-900 dark:text-gray2-300 "
                  }`}
                >
                  {step.label}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};