import React from "react";
import { OrderButton } from "../components";
import { mockOrderButton } from "../../__MOCK__/mockOrderButton";

export default {
  title: "page-ui/OrderButton",
  component: OrderButton,
};

const Template = (args) => (
  <div style={{ paddingTop: "300px",  background: 'black'}}>
    <OrderButton {...args} />
  </div>
);

const pageContact = {
  fb: {
    link: "https://m.me/14124124",
    image: "/image/button.png",
  },
  ig: {
    link: "",
    image: "/image/button.png",
  },
  chat: {
    link: "",
    image: "/image/button.png",
  },
  naverLine: {
    link: "https://line.me/R/ti/p/~3255555",
    image: "/image/button.png",
  },
  mobile: {
    link: "0939534445",
    image: "/image/button.png",
  },
};

export const Default = Template.bind({});
Default.args = {
  data: mockOrderButton,
  pageContact: pageContact,
  theme: { backgroundColor: 'rgba(14, 139, 77, 1)' },
};

export const HiddenButtonDefault = Template.bind({});
HiddenButtonDefault.args = {
  data: {...mockOrderButton, orderButtonStatus: 'hide'},
  pageContact: pageContact,
  theme: { backgroundColor: 'rgba(14, 139, 77, 0.2)' },
};

export const HiddenButtonContactDefault = Template.bind({});
HiddenButtonContactDefault.args = {
  data: mockOrderButton,
  pageContact: [],
  theme: { backgroundColor: 'rgba(14, 139, 77, 0.2)' },
};

export const ButtonContactPageHomeDefault = Template.bind({});
ButtonContactPageHomeDefault.args = {
  data: {...mockOrderButton, orderButtonStatus: 'hide'},
  pageContact: pageContact,
  renderType: "page_home",
};


export const ButtonBackgroundImage = Template.bind({});
ButtonBackgroundImage.args = {
  data: mockOrderButton,
  pageContact: pageContact,
  isUseBackgroundImage: true
};