// components/ui/Card.tsx
// White surface card with the donation-channel-card treatment (DESIGN.md):
// rounded-xl, 24px padding, the canonical drop shadow. Server-safe.

import * as React from "react";

type Elevation = "flat" | "drop" | "tight";

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  elevation?: Elevation;
  /** Render as a different element (e.g. "section", "article"). */
  as?: React.ElementType;
}

const elevations: Record<Elevation, string> = {
  flat: "",
  drop: "shadow-drop",
  tight: "shadow-drop-tight",
};

export function Card({
  elevation = "drop",
  as: Tag = "div",
  className = "",
  children,
  ...rest
}: CardProps) {
  const cls = [
    "bg-canvas rounded-xl p-md text-ink-strong",
    elevations[elevation],
    className,
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <Tag className={cls} {...rest}>
      {children}
    </Tag>
  );
}