import { Icon } from '@wordpress/components';

type StepsProps = {
	active: number;
	steps: Array< Step >;
};

type Step = {
	title: string;
	text: string;
};

const getStepCn = ( id: number, active: number ) => {
	const stepClasses = [ 'gs-step' ];
	if ( id === active ) {
		stepClasses.push( 'gs-step--active' );
	}
	if ( id < active ) {
		stepClasses.push( 'gs-step--completed' );
	}
	return stepClasses.join( ' ' );
};

export default function Steps( props: StepsProps ) {
	const { active, steps } = props;

	return (
		<div className="gs-steps">
			{ steps.map( ( s, index ) => (
				<div className={ getStepCn( index + 1, active ) } key={ index }>
					<Icon size={ 44 } icon="saved" />
					<div className="gs-step__content">
						<span className="gs-step__title">{ s.title }</span>
						<span className="gs-step__text">{ s.text }</span>
					</div>
				</div>
			) ) }
		</div>
	);
}