import { memo } from "react";

import type { Kennzahlen } from "../types";

interface Props {
  kennzahlen: Kennzahlen;
}

function KennzahlenTileKomponente({ kennzahlen }: Props) {
  return (
    <div>
      <p className="text-4xl font-bold tabular-nums leading-none">{kennzahlen.anzahl_offener_fehlbestaende}</p>
      <p className="mb-3 text-xs uppercase tracking-wide text-[var(--color-text-muted)]">Offene Fehlbestände</p>
      <ul className="card-list">
        <li style={{ padding: "0.3rem 0" }}>Genehmigte Mindermengen: {kennzahlen.anzahl_genehmigter_mindermengen}</li>
        <li style={{ padding: "0.3rem 0" }}>
          Kürzlich erledigt (7 Tage): {kennzahlen.anzahl_kuerzlich_erledigter_fehlbestaende}
        </li>
        <li style={{ padding: "0.3rem 0" }}>Problematische Objekte: {kennzahlen.anzahl_problematischer_objekte}</li>
        <li style={{ padding: "0.3rem 0" }}>Objekte gesamt: {kennzahlen.anzahl_objekte_gesamt}</li>
      </ul>
    </div>
  );
}

export const KennzahlenTile = memo(KennzahlenTileKomponente);