brackt/app/components/league/WizardStepper.tsx

import { Fragment } from "react";
import { Check } from "lucide-react";
import { cn } from "~/lib/utils";

export interface WizardStepperProps {
  currentStep: number;
  steps: string[];
  onStepClick: (n: number) => void;
}

export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepperProps) {
  return (
    <nav aria-label="Setup progress" className="mb-6">
      <ol className="flex items-center list-none p-0 m-0">
        {steps.map((label, i) => {
          const n = i + 1;
          const done = n < currentStep;
          const active = n === currentStep;
          return (
            <Fragment key={label}>
              {i > 0 && (
                <li role="presentation" aria-hidden="true" className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
              )}
              <li>
                <button
                  type="button"
                  onClick={() => done && onStepClick(n)}
                  aria-label={`Step ${n}: ${label}${done ? " (completed)" : active ? " (current)" : ""}`}
                  aria-current={active ? "step" : undefined}
                  className={cn(
                    "shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
                    done && "bg-primary border-primary text-primary-foreground",
                    active && !done && "border-primary text-primary",
                    !done && !active && "border-border text-muted-foreground",
                    done ? "cursor-pointer" : "cursor-default"
                  )}
                >
                  {done ? <Check className="h-4 w-4" aria-hidden="true" /> : <span aria-hidden="true">{n}</span>}
                </button>
              </li>
            </Fragment>
          );
        })}
      </ol>
      <div className="flex mt-1.5" aria-hidden="true">
        {steps.map((label, i) => {
          const n = i + 1;
          const done = n < currentStep;
          const active = n === currentStep;
          return (
            <Fragment key={label}>
              {i > 0 && <div className="flex-1" />}
              <div className="shrink-0 w-9 flex justify-center">
                <span className={cn(
                  "text-xs hidden sm:block whitespace-nowrap",
                  active ? "text-primary font-medium" : done ? "text-foreground" : "text-muted-foreground"
                )}>
                  {label}
                </span>
              </div>
            </Fragment>
          );
        })}
      </div>
    </nav>
  );
}