import React from "react";
import { Meta, Story } from "@storybook/react";
import { MoleculeBannerBackground } from "react/molecules/BannerBackground";
import { IBannerBackgroundProps } from "react/molecules/BannerBackground/BannerBackgroundProps";
import { theme } from "data/dataMx";
import { action } from "@storybook/addon-actions";

const meta: Meta = {
  title: "React/molecules/BannerBackground",
  component: MoleculeBannerBackground,
  argTypes: {
    textColor: {
      control: {
        type: "select",
      },
      options: Object.keys(theme),
    },
    background: {
      control: {
        type: "check",
      },
      options: Object.keys(theme),
    },
    onClick: {
      control: false,
    },
    style: {
      control: false,
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateBannerBackground: Story<IBannerBackgroundProps> = (props) => {
  return <MoleculeBannerBackground {...props} />;
};

export const BannerBackground = TemplateBannerBackground.bind({});

BannerBackground.args = {
  title: "Earn points in many ways",
  textColor: "neutral100",
  textAlign: "center",
  height: "auto",
  iconName: "earn_beer",
  background: ["primary100", "quaternary"],
  backgroundImage:
    "https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80",
  description:
    "You can earn points in different ways here at My cooler, simply by logging in, answering trivia, completing challenges, inviting friends, etc.",
  buttonText: "Here",
  buttonBackground: "primary",
  buttonBackgroundCustom: "neutral",
  onClick: action("Event Click"),
  style: {},
};
