import { BEWERTUNGEN, BEWERTUNG_BEZEICHNUNG, type Bewertung } from '../../../../shared/lernstand';

export interface SelbstbewertungProps {
  readonly onBewerten: (bewertung: Bewertung) => void;
}

/**
 * Selbstbewertung einer offenen Frage über die vier Stufen des Lernstands.
 *
 * Vier gleichrangige Schaltflächen in einer benannten Gruppe – kein
 * Zeitlimit, keine Vorauswahl. Die Stufen steuern später die Wiedervorlage.
 */
export function Selbstbewertung({ onBewerten }: SelbstbewertungProps): React.JSX.Element {
  return (
    <fieldset className="selbstbewertung">
      <legend className="selbstbewertung__titel">Wie gut wussten Sie die Antwort?</legend>
      <div className="selbstbewertung__stufen">
        {BEWERTUNGEN.map((bewertung) => (
          <button
            key={bewertung}
            type="button"
            className={`knopf selbstbewertung__stufe selbstbewertung__stufe--${bewertung}`}
            onClick={() => {
              onBewerten(bewertung);
            }}
          >
            {BEWERTUNG_BEZEICHNUNG[bewertung]}
          </button>
        ))}
      </div>
    </fieldset>
  );
}
