import React from "react";

/**
 * Kompakte Zusatzkennzahlen unter einem Chart,
 * beantwortet "und was heißt das jetzt?" ohne eigene Karte.
 */
export function StatZeile({
  eintraege,
  /**
   * Spalten auf breiten Schirmen. In einer Drittelkarte brechen vier Spalten
   * mitten im Betrag um ("1,22 Mio." / "€"): dort gehoeren zwei hin.
   */
  spalten = 4,
}: {
  eintraege: { label: string; wert: string; hinweis?: string }[];
  spalten?: 2 | 3 | 4;
}) {
  const raster = { 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4" }[spalten];
  return (
    <div
      className={`grid grid-cols-2 gap-x-6 gap-y-3 border-t border-solid border-border-default pt-3 ${raster}`}
    >
      {eintraege.map((eintrag) => (
        <div key={eintrag.label} className="flex flex-col gap-0.5">
          <span className="break-words text-[11px] uppercase tracking-[0.06em] text-text-neutral-tertiary">
            {eintrag.label}
          </span>
          <span className="text-[14px] font-semibold tabular-nums text-text-neutral-primary">
            {eintrag.wert}
          </span>
          {eintrag.hinweis ? (
            <span className="text-[11px] text-text-neutral-tertiary">{eintrag.hinweis}</span>
          ) : null}
        </div>
      ))}
    </div>
  );
}