import * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Card / panel surface (component spec C39): the one white container for panels, settings groups, profile blocks
 * and filter bars on the grey canvas. Flat (`bg-surface`, 1 px `border-panel`, `radius.md`), padded by density:
 * compact (1 rem, lists and filter bars) or comfortable (1.5 rem, forms and settings). A table brings its own
 * container (data table spec); don't put one inside a Surface.
 */
export function Surface({
  density = "compact",
  as: Tag = "div",
  className,
  ...props
}: React.HTMLAttributes<HTMLElement> & { density?: "compact" | "comfortable"; as?: "div" | "section" }) {
  return (
    <Tag
      data-slot="surface"
      className={cn("rounded-[var(--radius-md)] border border-[var(--color-border-panel)] bg-card", density === "compact" ? "p-[var(--density-compact-panel-padding)]" : "p-[var(--density-comfortable-panel-padding)]", className)}
      {...props}
    />
  );
}