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).
 */
export function PageContainer({ children }: { children: React.ReactNode }) {
  return <div className="flex flex-col gap-6 px-6 pb-10">{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;
}) {
  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-2 gap-4 lg:grid-cols-4",
    5: "grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-5",
  };
  return (
    <div className={`${klassen[spalten]} ${obenBuendig ? "items-start" : ""}`}>{children}</div>
  );
}