import type { WizardStep } from "../types";

export default function Stepper({ steps, activeStep, onSelect }: { steps: WizardStep[]; activeStep: string; onSelect: (id: string) => void }) {
  return (
    <ol className="stepper">
      {steps.map((step, index) => (
        <li key={step.id} className={`step ${activeStep === step.id ? "active" : ""} step-${step.status || "todo"}`}>
          <button onClick={() => onSelect(step.id)}>
            <span className="step-number">{index + 1}</span>
            <span>
              <strong>{step.label}</strong>
              {step.description && <small>{step.description}</small>}
            </span>
          </button>
        </li>
      ))}
    </ol>
  );
}