import React from "react";
import styles from "./step-progress.module.css";

interface StepProgressProps {
  /** Total number of steps in the process */
  totalSteps: number;
  /** Current active step (1-based index) */
  currentStep: number;
}

/**
 * StepProgress Component
 * Renders a simple progress bar with multiple steps.
 */
const StepProgress: React.FC<StepProgressProps> = ({ totalSteps, currentStep }) => {
  return (
    <div className={styles.progressBar}>
      {Array.from({ length: totalSteps }, (_, index) => {
        const step = index + 1;
        const isActive = step <= currentStep;
        return (
          <div
            key={step}
            className={`${styles.progressStep} ${isActive ? styles.active : ""}`}
          />
        );
      })}
    </div>
  );
};

export default StepProgress;