export interface ZurueckleisteProps {
  /** Wohin es zurückgeht, ausgeschrieben – etwa „Zum Start“. */
  readonly beschriftung: string;
  readonly onZurueck: () => void;
}

/**
 * Der Rückweg, ganz oben und in jeder Ansicht an derselben Stelle.
 *
 * **Warum es das gibt.** Der Rückweg stand in allen sechs Nebenansichten am
 * Ende der Seite: im Glossar hinter damals 87 Einträgen (heute 118), in der
 * Prüfungsauswertung
 * hinter der ganzen Themenanalyse. Wer sich verlaufen hatte, musste erst
 * durch den gesamten Inhalt scrollen, um wieder herauszufinden.
 *
 * Oben, immer gleich beschriftet, immer an derselben Stelle – das ist
 * zugleich, was WCAG 3.2.3 (konsistente Navigation) und 3.2.4 (konsistente
 * Bezeichnung) verlangen.
 *
 * Der untere Knopf bleibt, wo er ist: Bei einer langen Seite will niemand
 * zum Anfang zurückscrollen, nur um weiterzukommen. Zwei Wege zum selben
 * Ziel sind kein Widerspruch, solange beide gleich heißen.
 *
 * **Warum `<nav>`.** Screenreader führen Landmarken in einer eigenen Liste;
 * damit ist der Rückweg auffindbar, ohne die Seite zu durchsuchen. Der Name
 * unterscheidet ihn vom Hauptinhalt.
 */
export function Zurueckleiste({ beschriftung, onZurueck }: ZurueckleisteProps): React.JSX.Element {
  return (
    <nav className="zurueckleiste" aria-label="Bereichswechsel">
      <button type="button" className="knopf knopf--zurueck" onClick={onZurueck}>
        {/* Der Pfeil ist Zierde – die Richtung steht im Text. */}
        <span aria-hidden="true">←</span> {beschriftung}
      </button>
    </nav>
  );
}
