import { h } from "@stencil/core";
import scenario from "./sqm-program-explainer.feature";
export default {
  title: "Components/Program Explainer",
  parameters: {
    scenario,
  },
};
export const OneStep = () => {
  return (h("sqm-program-explainer", { header: "How it works" },
    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" })));
};
export const TwoSteps = () => {
  return (h("sqm-program-explainer", { header: "How it works" },
    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" })));
};
export const ThreeSteps = () => {
  return (h("sqm-program-explainer", { header: "How it works" },
    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
};
export const Custom = () => {
  return (h("sqm-program-explainer", { header: "How it works", "text-color": "#fffc4b", "background-color": "#ff7f7f" },
    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
};
export const ProgramExplainerGeneric = () => {
  return (h("sqm-program-explainer", { header: "Anything and everything can be passed to this component!", "text-color": "#eee", "background-color": "#333" },
    h("div", { style: {
        padding: "100px",
        border: "1px dashed black",
        background: "#eee",
        color: "#333",
      } }, "PLACEHOLDER"),
    h("div", { style: {
        padding: "100px",
        border: "1px dashed black",
        background: "#eee",
        color: "#333",
      } }, "PLACEHOLDER"),
    h("div", { style: {
        padding: "100px",
        border: "1px dashed black",
        background: "#eee",
        color: "#333",
      } }, "PLACEHOLDER")));
};
