Progress stepper

"use client";
import styles from "./ProgressStepper.module.css";
import { useState } from "react";
export default function ProgressStepper({
  steps = ["Brief", "Design", "Review"],
  onComplete,
}) {
  const [step, setStep] = useState(0);
  const complete = step === steps.length;
  return (
    <div className={styles.root}>
      <ol>
        {steps.map((label, index) => (
          <li
            key={label}
            data-done={index < step}
            aria-current={index === step ? "step" : undefined}
          >
            <span>{index < step ? "✓" : index + 1}</span>
            <small>{label}</small>
          </li>
        ))}
      </ol>
      <div className={styles.track} aria-hidden="true">
        <i style={{ width: `${(step / Math.max(steps.length, 1)) * 100}%` }} />
      </div>
      <p role="status">
        {complete
          ? "You’re ready for the next chapter."
          : `Step ${step + 1}: ${steps[step]}`}
      </p>
      <div className={styles.actions}>
        <button
          type="button"
          disabled={step === 0}
          onClick={() => setStep(step - 1)}
        >
          Back
        </button>
        <button
          type="button"
          onClick={() => {
            if (complete) {
              setStep(0);
              return;
            }
            const next = step + 1;
            setStep(next);
            if (next === steps.length) onComplete?.();
          }}
        >
          {complete
            ? "Start again"
            : step === steps.length - 1
              ? "Finish"
              : "Continue"}{" "}
          <span aria-hidden="true">→</span>
        </button>
      </div>
    </div>
  );
}