import { Meta, Story } from '@storybook/react';
import React from 'react';

import {
  ISimpleImageCarousel,
  SimpleImageCarousel,
} from '../../../components/ImageCarousel/SimpleImageCarousel';

import styled from 'styled-components';
import image1 from '../../../assets/images/backpack.png';
import image2 from '../../../assets/images/depot.png';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'UI/Images/Simple Image Carousel',
  component: SimpleImageCarousel,
};

export default meta;

const Template: Story<ISimpleImageCarousel> = args => {
  return (
    <RPGUIRoot>
      <CenteredContainer>
        <SimpleImageCarousel {...args} />
      </CenteredContainer>
    </RPGUIRoot>
  );
};

const CenteredContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
`;

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

SimpleImageCarouselStory.args = {
  images: [image1, image2],
  autoCycle: true,
  stopAutoCyclingOnInteraction: true,
};
