import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { MediaGallery, MediaGalleryProps } from "./MediaGallery";

export default {
  title: "Molecules/MediaGallery",
  component: MediaGallery,
  parameters: {
    layout: "centered",
  },
  decorators: [
    (Story) => (
      <div className="max-w-[720px]">
        <Story />
      </div>
    ),
  ],
} as Meta;

const Template: StoryFn<MediaGalleryProps> = (args) => (
  <MediaGallery {...args}></MediaGallery>
);

export const OneItem = Template.bind({});

OneItem.args = {
  items: [
    {
      url: "https://placekitten.com/1400",
    },
  ],
};

export const TwoItems = Template.bind({});

TwoItems.args = {
  items: [
    {
      url: "https://placekitten.com/1400",
    },
    {
      url: "https://placekitten.com/400",
    },
  ],
};

export const ThreeItems = Template.bind({});

ThreeItems.args = {
  items: [
    {
      url: "https://placekitten.com/1400",
    },
    {
      url: "https://placekitten.com/400",
    },
    {
      url: "https://placekitten.com/500",
    },
  ],
};

export const FourItems = Template.bind({});

FourItems.args = {
  items: [
    {
      url: "https://placekitten.com/1400",
    },
    {
      url: "https://placekitten.com/500",
    },
    {
      url: "https://placekitten.com/400",
    },
    {
      url: "https://placekitten.com/300",
    },
  ],
};

export const FiveItems = Template.bind({});

FiveItems.args = {
  items: [
    {
      url: "https://placekitten.com/1400",
    },
    {
      url: "https://placekitten.com/500",
    },
    {
      url: "https://placekitten.com/400",
    },
    {
      url: "https://placekitten.com/300",
    },
    {
      url: "https://placekitten.com/200",
    },
  ],
};

export const MoreItems = Template.bind({});

MoreItems.args = {
  items: [
    {
      url: "https://placekitten.com/1400",
    },
    {
      url: "https://placekitten.com/500",
    },
    {
      url: "https://placekitten.com/400",
    },
    {
      url: "https://placekitten.com/300",
    },
    {
      url: "https://placekitten.com/200",
    },
    {
      url: "https://placekitten.com/100",
    },
  ],
};

