import React from "react";

/**
 * Surface container. Optional header (title + actions) and body padding.
 */
export function Card({ title, subtitle, actions = null, children, padded = true, inset = false, style = {} }) {
  return (
    <div
      style={{
        background: inset ? "var(--ctv-bg-sunken)" : "var(--surface-card)",
        border: "1px solid var(--border-hairline)",
        borderRadius: "var(--radius-md)",
        overflow: "hidden",
        ...style,
      }}
    >
      {(title || actions) && (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: "12px",
            padding: "13px 16px",
            borderBottom: "1px solid var(--border-hairline)",
          }}
        >
          <div style={{ minWidth: 0 }}>
            {title && <div style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>{title}</div>}
            {subtitle && <div style={{ marginTop: 3, font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--text-secondary)" }}>{subtitle}</div>}
          </div>
          {actions && <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: "0 0 auto" }}>{actions}</div>}
        </div>
      )}
      <div style={{ padding: padded ? "16px" : 0 }}>{children}</div>
    </div>
  );
}