// StepIndicator — progress circles for multi-step form.

function StepIndicator({ current, total }) {
  const { React } = window;

  const labels = ['identity', 'target', 'deploy', 'compliance', 'poc', 'consent'];

  const steps = [];
  for (let i = 1; i <= total; i++) {
    const isDone = i < current;
    const isActive = i === current;
    steps.push({ num: i, isDone, isActive });
  }

  return (
    <div className="step-indicator">
      <div className="si-steps">
        {steps.map((s, idx) => (
          <React.Fragment key={s.num}>
            <div className={`si-step${s.isActive ? ' is-active' : ''}${s.isDone ? ' is-done' : ''}`}>
              <div className="si-circle">
                {s.isDone ? '✓' : s.num}
              </div>
              <div className="si-label">{labels[idx] || ''}</div>
            </div>
            {idx < steps.length - 1 && (
              <div className={`si-line${s.isDone ? ' is-done' : ''}`} />
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

window.StepIndicator = StepIndicator;