import React from 'react';
import { StepIndicatorProps } from './types';
import {
  StepIndicator as StyledStepIndicator,
  StepDot,
  StepLine,
  StepGroup,
  StepLabel
} from './styles';
import { STEP_LABELS } from './constants';
import { CheckmarkSvg } from './CheckmarkSvg';

export const StepIndicator: React.FC<StepIndicatorProps> = ({
  currentStep
}) => (
  <StyledStepIndicator>
    {[1, 2, 3].map((step, index) => (
      <React.Fragment key={step}>
        <StepGroup>
          <StepDot
            $active={currentStep === step}
            $completed={currentStep > step}
          >
            {currentStep > step ? <CheckmarkSvg /> : step}
          </StepDot>
          <StepLabel $active={currentStep >= step}>
            {STEP_LABELS[index]}
          </StepLabel>
        </StepGroup>
        {index < 2 && <StepLine $completed={currentStep > step} />}
      </React.Fragment>
    ))}
  </StyledStepIndicator>
);