import { Check } from "lucide-react";
import { clsx } from "clsx";

/**
 * Schrittanzeige fuer gefuehrte Ablaeufe (Assistent #020, Widerruf #024, Rotation #023):
 * erledigte Schritte mit Haken, der aktuelle in Akzentfarbe und als `aria-current="step"`.
 */
export function Schrittleiste({
  schritte,
  aktuell,
  beschriftung = "Schritte",
}: {
  schritte: readonly string[];
  /** Index des aktuellen Schritts; `schritte.length` heisst: alles erledigt. */
  aktuell: number;
  beschriftung?: string;
}) {
  return (
    <ol className="flex flex-wrap gap-2" aria-label={beschriftung}>
      {schritte.map((titel, index) => (
        <li
          key={titel}
          aria-current={index === aktuell ? "step" : undefined}
          className={clsx(
            "rounded-box flex min-h-11 items-center gap-2 border px-3 text-[13.5px]",
            index === aktuell
              ? "border-accent text-accent bg-raised font-medium"
              : index < aktuell
                ? "border-border text-text"
                : "border-border text-muted",
          )}
        >
          <span className="font-mono">
            {index < aktuell ? <Check className="size-4" aria-hidden /> : index + 1}
          </span>
          {titel}
        </li>
      ))}
    </ol>
  );
}