import { h } from "@stencil/core";
import scenario from "./sqm-referral-card.feature";
export default {
  title: "Components/Referral Card",
  parameters: {
    scenario,
  },
};
const media = (slot) => {
  return (h("sqm-portal-container", { gap: "large", slot: slot },
    h("sqm-hero-image", { header: "Get rewarded when your friend uses Klip", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000227/squatch-assets/IqB7GeS.png" })));
};
const sharebutton = (slot) => {
  return (h("sqm-portal-container", { gap: "large", slot: slot },
    h("sqm-text", null, "Choose how you want to share:"),
    h("sqm-text", null,
      h("sub", null, "Your unique referral link:"),
      h("sqm-share-code", null)),
    h("sqm-portal-container", { gap: "x-small" },
      h("sqm-share-button", { medium: "email" }, "Share via email"),
      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
};
const shareButtonsWithPromoCodes = (slot) => {
  return (h("sqm-portal-container", { gap: "large", slot: slot },
    h("sqm-text", null, "Choose how you want to share:"),
    h("sqm-text", null,
      h("sub", null, "Share with your friends:"),
      h("sqm-share-code", null),
      h("sqm-share-link", null)),
    h("sqm-portal-container", { gap: "x-small" },
      h("sqm-share-button", { medium: "email" }, "Share via email"),
      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"),
      h("sqm-portal-container", { gap: "x-small" },
        h("span", { style: { textAlign: "center", color: "var(--sl-color-gray-500)" } }, "You have copied this code before"),
        h("sqm-pagination", null)))));
};
const timeline = (slot, count) => {
  return (h("sqm-timeline", { slot: slot, icon: "circle" },
    count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
    count > 1 && (h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
    count > 2 && (h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
    count > 3 && (h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
};
export const ImageAndShareButtons = () => {
  return (h("sqm-referral-card", null,
    media("left"),
    sharebutton("right")));
};
export const LimitWidth = () => {
  return (h("sqm-referral-card", { limitWidth: true },
    media("left"),
    sharebutton("right")));
};
export const TimelineAndShareButtons = () => {
  return (h("sqm-referral-card", null,
    timeline("left", 3),
    sharebutton("right")));
};
export const OneTimeUsePromoCodes = () => {
  return (h("sqm-referral-card", null,
    timeline("left", 4),
    shareButtonsWithPromoCodes("right")));
};
export const StartAlignment = () => {
  return (h("sqm-referral-card", { "vertical-alignment": "start" },
    timeline("left", 4),
    sharebutton("right")));
};
export const CenterAlignment = () => {
  return (h("sqm-referral-card", { "vertical-alignment": "center" },
    timeline("left", 4),
    sharebutton("right")));
};
export const EndAlignment = () => {
  return (h("sqm-referral-card", { "vertical-alignment": "end" },
    timeline("left", 4),
    sharebutton("right")));
};
export const FlippedSlots = () => {
  return (h("sqm-referral-card", null,
    timeline("right", 3),
    sharebutton("left")));
};
export const NoLeft = () => {
  return h("sqm-referral-card", null, timeline("right", 3));
};
export const NoRight = () => {
  return h("sqm-referral-card", null, sharebutton("left"));
};
export const WithHeader = () => {
  return (h("sqm-referral-card", null,
    h("h3", { slot: "header" }, "Header slot content"),
    timeline("right", 3),
    sharebutton("left")));
};
export const WithFooter = () => {
  return (h("sqm-referral-card", null,
    timeline("right", 3),
    sharebutton("left"),
    h("sqm-portal-footer", { slot: "footer" })));
};
export const NoBorder = () => {
  return (h("sqm-referral-card", { "hide-border": "true" },
    timeline("right", 3),
    sharebutton("left"),
    h("sqm-portal-footer", { slot: "footer" })));
};
export const BackgroundColor = () => {
  return (h("sqm-referral-card", { "background-color": "aquamarine" },
    timeline("right", 3),
    sharebutton("left"),
    h("sqm-portal-footer", { slot: "footer" })));
};
export const ReferralCardGeneric = () => {
  return (h("sqm-referral-card", { "vertical-alignment": "center" },
    h("sqm-portal-container", { slot: "left", gap: "x-small" },
      h("div", { style: {
          padding: "100px",
          border: "1px dashed black",
          background: "#eee",
          color: "#333",
          textAlign: "center",
        } }, "PLACEHOLDER")),
    h("sqm-portal-container", { slot: "right", gap: "x-small" },
      h("div", { style: {
          padding: "100px",
          border: "1px dashed black",
          background: "#eee",
          color: "#333",
          textAlign: "center",
        } }, "PLACEHOLDER"))));
};
