import React from 'react';
import { STEPS } from '../context/RegistrationContext';

export default function ProgressStepper({ currentStep }) {
    return (
        <div className="stepper">
            {STEPS.map((step, idx) => {
                const isComplete = idx < currentStep;
                const isCurrent = idx === currentStep;
                const stepClass = [
                    'stepper-item',
                    isComplete ? 'stepper-complete' : '',
                    isCurrent ? 'stepper-active' : '',
                ].filter(Boolean).join(' ');

                return (
                    <React.Fragment key={step.key}>
                        <div className={stepClass}>
                            <div className="stepper-circle">
                                {isComplete ? '✓' : idx + 1}
                            </div>
                            <span className="stepper-label">{step.label}</span>
                        </div>
                        {idx < STEPS.length - 1 && (
                            <div className={`stepper-line ${isComplete ? 'stepper-line-complete' : ''}`} />
                        )}
                    </React.Fragment>
                );
            })}
        </div>
    );
}
