import type { KatalogBild as KatalogBildDaten } from '../../../../shared/katalog';
import { KatalogBild } from './KatalogBild';

/** Alternativtext, wenn im Katalog keiner hinterlegt ist. */
const ALT_ERSATZ = 'Amtliches Zeichen ohne hinterlegte Beschreibung';

export interface BilderleisteProps {
  readonly bildIds: readonly string[];
  readonly bildDaten: (bildId: string) => KatalogBildDaten | undefined;
}

/**
 * Reihe amtlicher Zeichen.
 *
 * Bewusst ein `<span>`: die Leiste steht auch innerhalb von `<label>`, wenn
 * das Zeichen selbst die Antwortoption ist.
 */
export function Bilderleiste({ bildIds, bildDaten }: BilderleisteProps): React.JSX.Element {
  return (
    <span className="bilderleiste">
      {bildIds.map((bildId) => {
        const daten = bildDaten(bildId);
        if (!daten) {
          return (
            <span key={bildId} className="katalogbild__ersatz">
              Zeichen nicht im Katalog hinterlegt.
            </span>
          );
        }
        return (
          <KatalogBild
            key={bildId}
            bildId={bildId}
            alt={daten.alt ?? ALT_ERSATZ}
            breite={daten.breite}
            hoehe={daten.hoehe}
          />
        );
      })}
    </span>
  );
}
