import React from 'react';
import { buildClassName } from '../utils/class-util';

interface StepIndicatorsProps {
  currentStep: number;
  stepLabels: string[];
}

const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep, stepLabels }) => {
  return (
    <div className="step-indicators">
      <div className="step-indicators__items">
        {stepLabels.map((stepName, index) => (
          <div
            key={`${index + 1}-${stepName}`}
            className={buildClassName([
              'step-indicators__item',
              currentStep === index && 'step-indicators__item--active',
              currentStep > index && 'step-indicators__item--completed'
            ])}>
            <div className="step-indicators__icon">{index + 1}</div>
            <div className="step-indicators__text">{stepName}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default StepIndicators;