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

/** Progress for the multi-step mobile completion (Brandbook §12.2). `current` is 1-based. */
export function StepIndicator({ steps, current, label }: { steps: string[]; current: number; label: string }) {
  return (
    <nav aria-label={label}>
      <ol className="flex items-center gap-1.5">
        {steps.map((s, i) => {
          const n = i + 1;
          const done = n < current;
          const active = n === current;
          return (
            <li key={s} className="flex min-w-0 flex-1 flex-col items-center gap-1" aria-current={active ? "step" : undefined}>
              <span
                className={cn(
                  "grid size-7 place-items-center rounded-full border text-[12px] font-bold",
                  done && "border-[var(--ok)] text-[var(--ok)]",
                  active && "border-[var(--ui-accent)] bg-[var(--ui-accent)] text-[var(--ui-accent-foreground)]",
                  !done && !active && "text-muted-foreground",
                )}
              >
                {done ? <Check className="size-3.5" aria-hidden /> : n}
              </span>
              <span className={cn("truncate text-[11px]", active ? "font-semibold" : "text-muted-foreground")}>{s}</span>
            </li>
          );
        })}
      </ol>
      <p className="sr-only">{label}</p>
    </nav>
  );
}