import "./StepTracker.scss";

/**
 * Horizontal dot progress indicator ("stepTracker" element type): one circle
 * per step, connected by a line, the current step filled solid.
 *
 * @param {Object} props
 * @param {number} props.total - Total number of steps.
 * @param {number} props.current - Current step, 1-based.
 */
export const StepTracker = ({ total, current }) => {
  const steps = Array.from({ length: total }, (_, index) => index + 1);

  return (
    <div className="step-tracker">
      {steps.map((step) => (
        <span
          key={step}
          className={`step-tracker__step${step === current ? " step-tracker__step--current" : ""}`}>
          {step}
        </span>
      ))}
    </div>
  );
};