import type { ReactNode } from "react";

// The same "rounded border border-border bg-white p-4" appeared at 26 call
// sites, all of them flat: a 1px border and nothing else, so a card sat on
// the page with no separation from it. Collecting them here is what makes it
// possible to give the whole app depth by changing one line.

export const CARD_CLASS = "rounded-md border border-border bg-white shadow-[var(--shadow-card)]";

export function Card({
  children,
  className = "",
  padding = "md",
}: {
  children: ReactNode;
  className?: string;
  /** `none` for cards that manage their own inner spacing (tables, lists). */
  padding?: "none" | "sm" | "md" | "lg";
}) {
  const pad = { none: "", sm: "p-3", md: "p-4", lg: "p-6" }[padding];
  return <div className={`${CARD_CLASS} ${pad} ${className}`}>{children}</div>;
}

/**
 * Section titles were all `text-sm font-bold text-ink` — the same weight and
 * size as emphasised body text, so headings did not read as a level of their
 * own. Slightly smaller, letter-spaced and muted separates them without
 * shouting.
 */
export function CardTitle({ children, className = "" }: { children: ReactNode; className?: string }) {
  return <h2 className={`text-xs font-bold uppercase tracking-wider text-ink-muted ${className}`}>{children}</h2>;
}