/**
 * Fahrzeugbild mit Platzhalter.
 *
 * Kapselt eine Reibung zwischen App und Bibliothek: Die App läuft mit
 * `exactOptionalPropertyTypes`, weshalb `src={undefined}` an einem `src?: string`
 * nicht zulässig ist. Statt an jeder Aufrufstelle bedingt zu verteilen, passiert
 * es hier einmal.
 */

import { ImagePlaceholder } from "@audi-dash/ui"

import { bildUrl } from "./bilder"

export function Bild({
  datei,
  beschreibung,
  name,
  groesse,
}: {
  datei: string | null | undefined
  beschreibung: string
  name: string
  groesse?: "default" | "mini" | "round"
}) {
  const url = bildUrl(datei)
  // Der Dateiname hilft nur, wenn er lesbar ist — in der 78px breiten
  // Miniaturansicht liefe er über den Rand hinaus.
  const mitDateiname = groesse !== "mini" && groesse !== "round"
  return (
    <ImagePlaceholder
      {...(url ? { src: url } : {})}
      {...(groesse ? { size: groesse } : {})}
      {...(mitDateiname && datei ? { hint: datei } : {})}
      alt={beschreibung}
      label={name}
    />
  )
}
