export interface LizenzblockProps {
  /** Beschriftung der Aufklappfläche, z. B. „Lizenztext von React anzeigen“. */
  readonly schalter: string;
  /** Name des Bildlaufbereichs, z. B. „Lizenztext von React“. */
  readonly bereich: string;
  readonly text: string | null;
  /**
   * `true`, wenn zum Eintrag bereits ein erklärender Hinweis steht.
   *
   * Dann entfällt der Ersatzsatz: Bei Chromium heißt es unmittelbar darüber,
   * dass der Lizenztext der Installation als eigene Datei beiliegt – ein
   * „Hierzu liegt kein Lizenztext bei“ darunter widerspräche dem.
   */
  readonly hinweisVorhanden?: boolean;
}

/**
 * Aufklappbarer Lizenztext.
 *
 * `<details>`/`<summary>` bringt den Auf- und Zuklappzustand samt
 * `aria-expanded` von Haus aus mit – verlässlicher als jede nachgebaute
 * Schaltfläche. Der Textkasten scrollt in sich (`overflow: auto`), damit die
 * Seite selbst nicht seitlich läuft; weil er scrollt, ist er fokussierbar und
 * lässt sich mit den Pfeiltasten lesen (WCAG 2.1.1).
 */
export function Lizenzblock({
  schalter,
  bereich,
  text,
  hinweisVorhanden = false,
}: LizenzblockProps): React.JSX.Element | null {
  if (text === null || text.trim().length === 0) {
    if (hinweisVorhanden) {
      return null;
    }
    /* „In dieser Ansicht“ statt „hierzu“: Der Text kann der Installation
       durchaus beiliegen und nur hier nicht eingebunden sein. */
    return <p className="lizenzblock__leer">In dieser Ansicht ist kein Lizenztext hinterlegt.</p>;
  }

  return (
    <details className="lizenzblock">
      <summary className="lizenzblock__schalter">{schalter}</summary>
      {/*
        Fokussierbarer Bildlaufbereich: axe verlangt das für scrollbare
        Bereiche (scrollable-region-focusable), jsx-a11y verbietet tabIndex auf
        nicht bedienbaren Elementen. Hier gewinnt die Nutzbarkeit – ohne Fokus
        käme man mit der Tastatur nicht durch den Text.
      */}
      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
      <div className="lizenztext" role="group" aria-label={bereich} tabIndex={0}>
        <pre className="lizenztext__inhalt">{text}</pre>
      </div>
    </details>
  );
}
