Card = ({
  children,
  isFormula,
  title,
  shadow,
  noPadding,
  style,
  footer,
  hasFooter,
}) => {
  const {
    selected,
    connectors: { connect, drag },
  } = useNode((node) => ({ selected: node.events.selected }));

  return (
    <div
      className={`card ${shadow ? "shadow" : ""} builder ${
        selected ? "selected-node" : ""
      }`}
      style={reactifyStyles(style)}
      ref={(dom) => connect(drag(dom))}
    >
      {title && title.length > 0 && (
        <div className="card-header">
          {isFormula?.title ? (
            <span className="font-monospace">={title}</span>
          ) : (
            title
          )}
        </div>
      )}
      <div className={`card-body ${noPadding ? "p-0" : ""}`}>
        <div className="canvas">{children}</div>
      </div>
      {hasFooter ? (
        <div className={`card-footer ${noPadding ? "p-0" : ""}`}>
          <Element canvas id={`cardfooter`} is={Column}>
            {footer}
          </Element>
        </div>
      ) : null}
    </div>
  );
}
@param {object} props
@param {string} props.children
@param {object} props.isFormula
@param {string} [props.title]
@param {string} props.shadow
@param {boolean} props.noPadding
@param {object} props.style
@returns {div}
@category saltcorn-builder
@subcategory components
@namespace