import type { Meta, StoryObj } from '@storybook/react';
import Slider from "react-slick";
import testImg from '../../assets/images/ipiresies.svg';
import DuaSlider from '../../components/UI/DuaSlider/DuaSlider';
import DuaSlide from '../../components/UI/DuaSlider/DuaSlide/DuaSlide';

/***
 * Basic Slider component.
 * 
 * Utilizes the react-slick library.
 */
const meta: Meta<typeof DuaSlider> = {
  title:'Components/DuaSlider/DuaSlider',
  component: DuaSlider,
};
 
export default meta;
type Story = StoryObj<typeof DuaSlider>;
 
const settings = {
  dots: true,
  slidesToShow: 1,
  slidesToScroll: 1
};

export const DuaSliderEx: Story = {
  args: {
      
  },
  argTypes: {
    children: {
        control: {
            type: "number",
            min: 1,
            max: 20,
        }
    },
  },
  render: (args: any) => {
    return (
      <Slider {...settings}>
         {
                    [...Array(args.children).keys()].map((_, index) =>
                      <DuaSlide img={testImg} hyperTitle={"Preview Title"} title={"Preview Content"}/>
                    )
         }
      </Slider>
        
    )
  }
};