// helpers
import { cn } from "@buzzwaretech/utils";

interface OnboardingStepIndicatorProps {
  currentStep: number;
  totalSteps: number;
}

export function OnboardingStepIndicator({
  currentStep,
  totalSteps,
}: OnboardingStepIndicatorProps) {
  const renderIndicators = () => {
    const indicators = [];

    for (let i = 0; i < totalSteps; i++) {
      const isCompleted = i < currentStep;
      const isActive = i === currentStep - 1;
      const isFirstStep = i === 0;
      const isLastStep = i === totalSteps - 1;

      indicators.push(
        <div
          key={`line-${i}`}
          className={cn("-ml-0.5 h-1.5 w-full", {
            "bg-success-primary": isCompleted,
            "bg-surface-1": !isCompleted,
            "rounded-l-full": isFirstStep,
            "rounded-r-full": isLastStep || isActive,
            "z-10": isActive,
          })}
        />,
      );
    }

    return indicators;
  };

  return (
    <div className="flex flex-col justify-center">
      <div className="text-13 font-medium text-tertiary">
        {currentStep} of {totalSteps} steps
      </div>
      <div className="mx-1 my-0.5 flex w-40 items-center justify-center lg:w-52">
        {renderIndicators()}
      </div>
    </div>
  );
}