import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
const style = {
  Wrapper: {
    maxWidth: "200px",
    marginLeft: "auto",
  },
  PayoutButtonDescription: {
    color: "var(--sqm-text-subdued)",
    fontSize: "var(--sl-font-size-small)",
    margin: "0",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function PayoutButtonScrollView(props) {
  const { text, states } = props;
  if (!states.payoutSettingsComplete)
    return h("div", null);
  return (h("div", { class: sheet.classes.Wrapper },
    h("style", { type: "text/css" }, styleString),
    h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
    h("p", { class: sheet.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
}
