/**
 * Renders the 6-step progress list; highlights the active step.
 */

import STEPS from '../steps';

export default function StepIndicator( { currentStep } ) {
	return (
		<ol className="embp-wizard-steps">
			{ STEPS.map( ( step, index ) => {
				const className = [
					'embp-wizard-steps__item',
					index === currentStep ? 'is-active' : '',
					index < currentStep ? 'is-complete' : '',
				]
					.filter( Boolean )
					.join( ' ' );

				return (
					<li key={ step.id } className={ className }>
						{ index + 1 }. { step.label }
					</li>
				);
			} ) }
		</ol>
	);
}
