import { useTranslation } from "react-i18next";
import Icon from "./Icon";
import { ruleList } from "../passwordPolicy";

/**
 * Anforderungsliste unter einem Passwortfeld, die sich beim Tippen abhakt.
 *
 * Solange nichts eingegeben ist, bleibt sie neutral – ein Feld, das man noch
 * gar nicht angefasst hat, soll nicht wie ein Fehler aussehen.
 */
export default function PasswordRules({ policy, value }) {
  const { t } = useTranslation();
  const regeln = ruleList(policy, value, t);
  const unberuehrt = !value;

  return (
    <ul className="pw-rules" aria-live="polite">
      {regeln.map((r) => (
        <li key={r.id} className={r.ok ? "pw-rule erfuellt" : "pw-rule"}>
          <span className="pw-rule-mark" aria-hidden="true">
            {r.ok ? <Icon name="check" size={13} strokeWidth={3} /> : <span className="pw-rule-dot" />}
          </span>
          <span className={unberuehrt ? "muted" : undefined}>{r.text}</span>
          <span className="sr-only">{r.ok ? t("password.met") : t("password.unmet")}</span>
        </li>
      ))}
    </ul>
  );
}