import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/cn";

export function Card({
  children,
  className,
  padding = "default",
  elevated = false,
  ...props
}: HTMLAttributes<HTMLElement> & {
  children: ReactNode;
  padding?: "none" | "default" | "compact";
  /** Subtle shadow for elevated surfaces; default cards are border-only. */
  elevated?: boolean;
}) {
  return (
    <article
      className={cn(
        "rounded-pv border border-line bg-surface",
        elevated && "shadow-pv",
        padding === "default" && "p-4",
        padding === "compact" && "p-3",
        className,
      )}
      {...props}
    >
      {children}
    </article>
  );
}