import { useKatalogBild } from '../../hooks/useKatalogBild';

export interface KatalogBildProps {
  readonly bildId: string;
  /** Alternativtext aus dem Katalog; verrät bei Bildfragen die Lösung nicht. */
  readonly alt: string;
  readonly breite: number;
  readonly hoehe: number;
}

/**
 * Ein amtliches Prüfzeichen.
 *
 * Die Bilddaten kommen als Data-URL über IPC. Schlägt das fehl, tritt der
 * Alternativtext sichtbar an die Stelle des Bildes – die Frage bleibt damit
 * beantwortbar.
 */
export function KatalogBild({ bildId, alt, breite, hoehe }: KatalogBildProps): React.JSX.Element {
  const zustand = useKatalogBild(bildId);

  switch (zustand.art) {
    case 'fertig':
      return (
        <img className="katalogbild" src={zustand.quelle} alt={alt} width={breite} height={hoehe} />
      );
    case 'laedt':
      return <span className="katalogbild__ersatz">Zeichen wird geladen: {alt}</span>;
    case 'fehler':
      return (
        <span className="katalogbild__ersatz">Zeichen nicht darstellbar. Es zeigt: {alt}</span>
      );
  }
}
