import React from "react";

interface IProps {
  currentStep: number;
  stepCount: number;
  stepName: string;
}

function renderStep(step: number, isCurrent: boolean) {
  return <React.Fragment key={step}>
    {step > 1 && <div className="step-connector" />}
    <div className={`step ${isCurrent ? 'active-step' : ''}`}>{step}</div>
  </React.Fragment>;
}

export function StepLine(props: IProps) {
  return <div className='step-line'>
    {props.currentStep}/{props.stepCount} &nbsp; {props.stepName}
  </div>
}