import { h } from "@stencil/core";
import { ShareButtonView } from "./sqm-share-button-view";
import scenario from "./ShareButton.feature";
export default {
  title: "Components/Share Button",
  parameters: {
    scenario,
  },
};
export const WithIconPrefix = () => {
  const props = {
    medium: "whatsapp",
    iconslot: "prefix",
  };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const WithIconSuffix = () => {
  const props = { medium: "whatsapp", iconslot: "suffix" };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const WithIconOverride = () => {
  const props = {
    medium: "facebook",
    icon: "person-badge",
  };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const TextStyle = () => {
  const props = {
    medium: "facebook",
    type: "text",
  };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const WithoutIcon = () => {
  const props = { medium: "facebook", hideicon: true };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const WithoutText = () => {
  const props = { medium: "facebook", hidetext: true };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const TextStyleWithoutIcon = () => {
  const props = { medium: "facebook", type: "text", hideicon: true };
  return h(ShareButtonView, Object.assign({}, props), "Share");
};
export const WithCustomColorsAndBranding = () => {
  const props = {
    medium: "facebook",
    type: "text",
    backgroundcolor: "red",
    textcolor: "yellow",
    iconslot: "prefix",
    border: "2px solid yellow",
    borderradius: 30,
  };
  return h(ShareButtonView, Object.assign({}, props), "Facebook");
};
export const WithCustomBorderRadius = () => {
  const props = {
    medium: "facebook",
    type: "text",
    borderradius: 8,
    iconslot: "prefix",
  };
  return h(ShareButtonView, Object.assign({}, props), "Facebook");
};
export const LinkLocationTest = () => {
  const props = {
    medium: "facebook",
    type: "text",
    onClick: undefined,
    messageLink: "https://www.example.com",
  };
  return h(ShareButtonView, Object.assign({}, props), "Click me");
};
export const FullStackIcon = () => {
  return (h("div", null,
    h("sqm-share-button", { medium: "facebook" },
      h("span", null, "Facebook")),
    h("br", null),
    h("sqm-share-button", { medium: "email" },
      h("span", null, "Email"))));
};
export const AllMediums = () => {
  return (h("div", null,
    h("sqm-share-button", { medium: "facebook" },
      h("span", null, "Facebook")),
    h("br", null),
    h("sqm-share-button", { medium: "email" },
      h("span", null, "Email")),
    h("br", null),
    h("sqm-share-button", { medium: "whatsapp" },
      h("span", null, "WhatsApp")),
    h("br", null),
    h("sqm-share-button", { medium: "linkedin" },
      h("span", null, "Linkedin")),
    h("br", null),
    h("sqm-share-button", { medium: "twitter" },
      h("span", null, "Post on X")),
    h("br", null),
    h("sqm-share-button", { medium: "pinterest" },
      h("span", null, "Pinterest")),
    h("br", null),
    h("sqm-share-button", { medium: "fbmessenger" },
      h("span", null, "Messenger")),
    h("br", null),
    h("sqm-share-button", { medium: "sms" },
      h("span", null, "SMS")),
    h("br", null),
    h("sqm-share-button", { medium: "linemessenger" },
      h("span", null, "Line Messenger")),
    h("br", null),
    h("sqm-share-button", { medium: "direct" },
      h("span", null, "Share"))));
};
