export type HinweisArt = 'hinweis' | 'fehler';

const SYMBOL: Readonly<Record<HinweisArt, string>> = Object.freeze({
  hinweis: 'i',
  fehler: '!',
});

const VORSPANN: Readonly<Record<HinweisArt, string>> = Object.freeze({
  hinweis: 'Hinweis:',
  fehler: 'Fehler:',
});

export interface HinweisProps {
  readonly art: HinweisArt;
  /**
   * Meldungen, die erst später auftauchen (etwa ein Speicherfehler), werden
   * als `alert` angesagt – sonst bliebe die Information Sehenden vorbehalten.
   */
  readonly alsMeldung?: boolean;
  /**
   * Enthält der Inhalt eigene Absätze oder Listen? Dann trägt ein `<div>`
   * den Text statt des `<p>`: Ein `<p>` darf keine Blockelemente enthalten –
   * React meldete hier „<ul> cannot be a descendant of <p>“, und was ein
   * Screenreader vorliest, entspräche nicht mehr dem geschriebenen Baum.
   */
  readonly blockinhalt?: boolean;
  readonly children: React.ReactNode;
}

/**
 * Kurzer Hinweis- oder Fehlerkasten.
 *
 * Die Art ist an Symbol, Vorspanntext und Farbe erkennbar – nie an der Farbe
 * allein (WCAG 1.4.1).
 */
export function Hinweis({
  art,
  alsMeldung = false,
  blockinhalt = false,
  children,
}: HinweisProps): React.JSX.Element {
  /* Beide Varianten rendern identisch (die Klasse trägt das Aussehen, der
     Vorspann bleibt eine Zeile für sich, sobald ein Block folgt) – nur das
     Element wechselt, damit der Baum gültig bleibt. */
  const inhalt = (
    <>
      <span className="hinweis__vorspann">{VORSPANN[art]}</span> {children}
    </>
  );

  return (
    <div className={`hinweis hinweis--${art}`} {...(alsMeldung ? { role: 'alert' } : {})}>
      <span className="hinweis__symbol" aria-hidden="true">
        {SYMBOL[art]}
      </span>
      {blockinhalt ? (
        <div className="hinweis__text">{inhalt}</div>
      ) : (
        <p className="hinweis__text">{inhalt}</p>
      )}
    </div>
  );
}
