import { ProductImageContent } from "../components";
import React from "react";

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

const Template = (args) => (
  <div>
    <ProductImageContent {...args} />
  </div>
);

export const List = Template.bind({});
List.args = {
  productImageLayout: "list",
  productImageList: [
    {
      dimensions: { width: 1024, height: 1024 },
      fileName: "233ab84bf46a64db39faa82f7a755852.jpeg"
    },
    {
      dimensions: { width: 1024, height: 1024 },
      fileName: "233ab84bf46a64db39faa82f7a755852.jpeg"
    },
  ],
  marginLeft: 0,
  marginRight: 0,
  marginTop: 30
};

export const Grid = Template.bind({});
Grid.args = {
  productImageLayout: "grid",
  productImageList: [
    {
        dimensions: { width: 1024, height: 1024 },
        fileName: "233ab84bf46a64db39faa82f7a755852.jpeg"
      },
      {
        dimensions: { width: 1024, height: 1024 },
        fileName: "233ab84bf46a64db39faa82f7a755852.jpeg"
      },
  ],
  marginLeft: 0,
  marginRight: 0,
};

export const Carousel = Template.bind({});
Carousel.args = {
  productImageLayout: "carousel",
  productImageList: [
    {
        dimensions: { width: 1024, height: 1024 },
        fileName: "233ab84bf46a64db39faa82f7a755852.jpeg"
      },
      {
        dimensions: { width: 1024, height: 1024 },
        fileName: "233ab84bf46a64db39faa82f7a755852.jpeg"
      },
  ],
  marginLeft: 0,
  marginRight: 0,
  marginTop: 50,
  isMobile: true,
  theme: { primary: 'red'}
};