import Icon from "./Icon";

/**
 * Die Art einer Bestandsbewegung als Sinnbild statt als Wort.
 *
 * Grosser Pfeil auf eine Linie zu (Einlagern), von ihr weg (Auslagern), Stift
 * (Korrektur) – dieselben Zeichen wie auf den Ein-/Auslagern-Knoepfen.
 *
 * Vorher standen hier zwei gefuellte Kisten, die sich NUR in einem kleinen
 * Pfeil unterschieden. Bei 18 px war das nicht zu trennen; erkannt hat man sie
 * allein an der Farbe – und die trug mit Gruen/Orange eine Wertung, die es
 * nicht geben soll. Auslagern ist kein Missstand.
 *
 * Deshalb: eine Farbe fuer alle drei, die Richtung liegt im Zeichen selbst.
 *
 * Titel und aria-label behalten das Wort: fuer Screenreader und fuer alle, die
 * ein Sinnbild nicht auf Anhieb lesen.
 */
const LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" };
const ICON = { in: "checkin", out: "checkout", adjust: "edit" };

export default function BewegungIcon({ typ, size = 19 }) {
  const wort = LABEL[typ] || typ;
  return (
    <span className="bewegung-icon" title={wort} aria-label={wort} role="img">
      <Icon name={ICON[typ] || "package"} size={size} />
    </span>
  );
}