import { useId } from 'react';

import type { BereichErgebnis } from '../../../../shared/pruefung';
import { Fortschritt } from '../lernen/Fortschritt';

export interface ThemenanalyseProps {
  readonly bereiche: readonly BereichErgebnis[];
}

/**
 * Ergebnis je Kapitel und Abschnitt.
 *
 * Jede Zeile nennt die Zahlen als Satz; der Balken ist Zugabe und trägt keine
 * Information, die nicht auch im Text steht (WCAG 1.4.1).
 */
export function Themenanalyse({ bereiche }: ThemenanalyseProps): React.JSX.Element {
  const titelId = useId();

  return (
    <div className="themenanalyse">
      <h2 className="themenanalyse__titel" id={titelId}>
        Ergebnis nach Themenbereichen
      </h2>

      {bereiche.length === 0 ? (
        <p>Zu dieser Simulation liegt keine Aufschlüsselung nach Bereichen vor.</p>
      ) : (
        <ul className="themenanalyse__liste" aria-labelledby={titelId}>
          {bereiche.map((bereich) => (
            <li key={bereich.bereich}>
              <p className="themenanalyse__bereich">
                {bereich.bereich} – {bereich.titel}
              </p>
              <Fortschritt
                beschriftung={`Ergebnis in ${bereich.titel}`}
                text={`${String(bereich.richtig)} von ${String(bereich.gesamt)} Fragen richtig`}
                wert={bereich.richtig}
                minimum={0}
                maximum={bereich.gesamt}
              />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
