// Steps.jsx — top progress for the registration flow
const STEP_LABELS = ["Session", "Player", "Parent", "Medical", "Waivers", "Payment"];

const StepProgress = ({ current = 1 }) => (
  <div className="bee-steps">
    {STEP_LABELS.map((label, i) => (
      <React.Fragment key={label}>
        <div className={`bee-step ${i < current ? "done" : ""} ${i === current ? "current" : ""}`}>
          <div className="dot">{i < current ? "✓" : i + 1}</div>
          <span>{label}</span>
        </div>
        {i < STEP_LABELS.length - 1 && <div className={`bee-step-sep ${i < current ? "done" : ""}`} />}
      </React.Fragment>
    ))}
  </div>
);

window.StepProgress = StepProgress;