import { Stat } from '../ui'
import { useStundenkonto } from '../../hooks/useStundenkonto'
import { stundenkontoAnsicht } from '../../lib/stundenkontoView'

// Stundenkonto eines Kunden als Kennzahlen: Guthaben, Vorschuss für die Einrichtung, Mehraufwand, nächster Verfall.
// Hosting-Abo und fehlendes Abo bekommen nur den Hinweis. Ohne brauchbare Antwort (Fehler, altes Portal) steht nichts da.
export default function StundenkontoLeiste({ customerId, reloadKey = '' }) {
  const { antwort, loading } = useStundenkonto(customerId, { reloadKey })
  if (loading) return <p className="muted">Wird geladen …</p>
  const ansicht = stundenkontoAnsicht(antwort)
  if (!ansicht) return null
  if (ansicht.art !== 'konto') return <p className="muted">{ansicht.hinweis}</p>
  return (
    <div className="stats">
      {ansicht.eintraege.map((e) => <Stat key={e.key} label={e.label} value={e.wert} sub={e.sub} tone={e.ton} />)}
    </div>
  )
}