import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export function CardFeedView(props, children) {
  // Dependent on props, not feasiable to move out
  const style = {
    Container: {
      columnGap: props.gap + "px",
      columnWidth: props.width + "px",
      "& > div": {
        marginBottom: "24px",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
    :host{
      display: block;   
    }

  `;
  return (h("div", null,
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
}
