import Heading from "./Heading";

export default function Card(props) {
	return (
		<div
			className={`
        dxp-bg-gradient-to-br
        dxp-border
        dxp-border-gray-200
        dxp-from-gray-200/0
        dxp-p-4
        dxp-rounded-lg
        dxp-to-gray-200/[.08]
        focus:dxp-shadow-black/[.08]
        hover:dxp-shadow-black/[.08]
        ${props.wide ? "dxp-col-span-2" : ""}
        ${props.premium ? "disabled" : ""}
        `}
		>
			<Heading
				level="h3"
				title={props.title + (props.premium ? " (Premium)" : "")}
				className="dxp-font-bold dxp-mb-4 dxp-mt-0 dxp-text-sm"
			/>
			{props.children}
		</div>
	);
}