import type { CSSProperties, ReactNode } from "react";

const CARD_BORDER =
	"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";

/**
 * Public-site surface card. Mirrors the CSS .content-card / SectionCard visual
 * language (--radius-lg corners, --shadow-card, hairline border) so every page
 * that opts out of ContentCard still shares one consistent component.
 */
export function SurfaceCard({
	className = "",
	style,
	children,
}: {
	className?: string;
	style?: CSSProperties;
	children: ReactNode;
}) {
	return (
		<div
			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
			style={{
				borderColor: CARD_BORDER,
				boxShadow: "var(--shadow-card)",
				...style,
			}}
		>
			{children}
		</div>
	);
}

/** Padded body for a SurfaceCard. Override padding via className. */
export function SurfaceCardBody({
	className = "p-5",
	children,
}: {
	className?: string;
	children: ReactNode;
}) {
	return <div className={className}>{children}</div>;
}