---
// Composable card container (.card). For the fixed demo-showcase card see ../cards/Card.astro.

interface Props {
	/** element to render instead of div (e.g. form, a) */
	as?: string;
	/** card-{size} body padding: sm | md | lg */
	size?: string;
	class?: string;
	/** remaining attributes (id, action, data-*, …) are forwarded to the element */
	[key: string]: unknown;
}

const { as: Element = 'div', size, class: className, ...rest } = Astro.props;
---

<Element class:list={['card', size && `card-${size}`, className]} {...rest}>
	<slot />
</Element>