import { h } from "@stencil/core";
import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
import dashboardTemplate from "../../templates/Dashboard.html";
export default {
  title: "Components/Program Menu",
};
export const OneProgram = createHookStory(() => {
  return (h("sqm-program-menu", null,
    h("sl-menu-item", { value: "referral-program" }, "Referral Program")));
});
export const TwoProgram = createHookStory(() => {
  return (h("sqm-program-menu", null,
    h("sl-menu-item", { value: "referral-program" }, "Referral Program"),
    h("sl-menu-item", { value: "partner-program" }, "Partner Program")));
});
export const FiveProgram = createHookStory(() => {
  return (h("sqm-program-menu", null,
    h("sl-menu-item", { value: "program1" }, "Program 1"),
    h("sl-menu-item", { value: "program2" }, "Program 2"),
    h("sl-menu-item", { value: "program3" }, "Program 3"),
    h("sl-menu-item", { value: "program4" }, "Program 4"),
    h("sl-menu-item", { value: "program5" }, "Program 5")));
});
export const ProgramMenuWithSwitch = createHookStory(() => {
  return (h("div", null,
    h("sqb-program-section", { "program-id": "Vacay-referral" },
      h("sqm-program-menu", null,
        h("sl-menu-item", { value: "Vacay-referral" }, "Vacay-referral"),
        h("sl-menu-item", { value: "vacay-affiliates" }, "vacay-affiliates")),
      h("sqb-program-switch", null,
        h("template", { "program-id": "Vacay-referral" },
          h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
              data: { html: dashboardTemplate },
            } })),
        h("template", { "program-id": "vacay-affiliates" },
          h("sqb-widget", { "widget-type": "p/vacay-affiliates/w/referrerWidget", demoData: {
              data: { html: dashboardTemplate },
            } }))))));
});
