import type { HTMLAttributes, ReactNode } from 'react';

interface CardProps extends HTMLAttributes< HTMLDivElement > {
	className?: string;
	children: ReactNode;
}

/**
 * The basic container for one idea. Callers pass the exact modifier classes from
 * the design system (e.g. `glassy pad lift`) so the locked CSS still applies.
 * @param root0
 * @param root0.className
 * @param root0.children
 */
export const Card = ( { className = '', children, ...rest }: CardProps ) => (
	<div
		{ ...rest }
		className={ [ 'card', className ].filter( Boolean ).join( ' ' ) }
	>
		{ children }
	</div>
);
