import React from "react";

/**
 * Inhaltsspalte einer Seite.
 * 24 px Außenabstand, 16 px Rasterabstand: entspricht dem 8-px-System
 * aus den UI-Guidelines (internal ≤ external).
 *
 * Unter `sm` sind 24 px Rand ein Achtel der Fensterbreite: Der Rand kostet
 * dort mehr Platz, als er Ruhe bringt. Deshalb 16 px, der nächste Wert der
 * Skala, nicht ein neuer.
 */
export function PageContainer({ children }: { children: React.ReactNode }) {
  return <div className="flex flex-col gap-6 px-4 pb-10 sm:px-6">{children}</div>;
}

/** Standard-Raster für eine Kartenreihe. */
export function Raster({
  spalten,
  /**
   * Karten oben ausrichten statt auf gleiche Hoehe strecken.
   * Gleiche Hoehe ist richtig, wenn alle Karten dieselbe Struktur haben
   * (KPI-Reihe). Sobald ein Chart mit fester Hoehe neben einer Tabelle steht,
   * erzeugt Strecken nur Weissraum.
   */
  obenBuendig = false,
  children,
}: {
  /** Spaltenzahl auf großen Bildschirmen. */
  spalten: 2 | 3 | 4 | 5;
  obenBuendig?: boolean;
  children: React.ReactNode;
}) {
  /**
   * Jede Leiter beginnt einspaltig. Zwei Spalten sind bei 375 px rund 155 px
   * je Karte: darin bricht ein Währungswert zwischen Betrag und Euro-Zeichen
   * um, und die Karte wird höher statt schmaler.
   *
   * Wann die erste Verdopplung kommt, hängt am Inhalt, nicht an der Zielzahl:
   * Die Leitern 4 und 5 tragen KPI-Karten (kurzer Wert, feste Höhe) und
   * verdoppeln bei `sm`, wo die Seitenleiste noch ausgefahren ist und die
   * volle Fensterbreite zur Verfügung steht. Die Leitern 2 und 3 tragen
   * Diagramme und Tabellen, die halbiert erst ab `md` lesbar bleiben.
   *
   * Keine Leiter erhöht bei `md`: Dort kommt die Seitenleiste zurück und
   * nimmt 240 px weg, die Karten würden schmaler statt breiter.
   *
   * Ab 1024 px ist jede Leiter identisch zum abgenommenen Stand.
   */
  const klassen: Record<number, string> = {
    2: "grid grid-cols-1 gap-4 md:grid-cols-2",
    3: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
    4: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
    5: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
  };
  return (
    <div className={`${klassen[spalten]} ${obenBuendig ? "items-start" : ""}`}>{children}</div>
  );
}