import React from 'react';
import { __ } from '@wordpress/i18n';
import { Check } from 'lucide-react';

/** Connected progress header shared by the setup steps and completion screen. */
export default function SetupSteps( {
	steps,
	currentStep,
	complete = false,
	disabled = false,
	onStepChange,
} ) {
	const activeStep = complete ? steps.length - 1 : currentStep;
	const StepTag = onStepChange ? 'button' : 'div';

	return (
		<div
			className="arrayfunnel-setup__progress"
			style={ { '--arrayfunnel-setup-step-count': steps.length } }
			role="list"
			aria-label={ __( 'Form progress', 'arrayfunnel' ) }
		>
			{ steps.map( ( label, index ) => {
				const isActive = index === activeStep;
				const isDone = complete || index < currentStep;
				const canNavigate = ! disabled && index <= activeStep;

				return (
					<div
						className="arrayfunnel-setup__progress-item"
						key={ label }
						role="listitem"
						aria-current={ isActive ? 'step' : undefined }
					>
						<StepTag
							{ ...( onStepChange
								? {
										type: 'button',
										onClick: () =>
											canNavigate &&
											onStepChange( index ),
										disabled: ! canNavigate,
										'aria-label': label,
								  }
								: {} ) }
							className={ `arrayfunnel-setup__progress-step${
								isActive
									? ' arrayfunnel-setup__progress-step--active'
									: ''
							}${
								isDone
									? ' arrayfunnel-setup__progress-step--done'
									: ''
							}` }
						>
							{ isDone ? (
								<Check size={ 14 } aria-hidden="true" />
							) : (
								index + 1
							) }
						</StepTag>
						<span className="arrayfunnel-setup__progress-label">
							{ label }
						</span>
						{ index < steps.length - 1 && (
							<span
								className={ `arrayfunnel-setup__progress-line${
									isDone
										? ' arrayfunnel-setup__progress-line--done'
										: ''
								}` }
								aria-hidden="true"
							/>
						) }
					</div>
				);
			} ) }
		</div>
	);
}