import type { Meta, StoryObj } from '@storybook/react'

import { ISlider } from './Slider.interface'
import React from 'react'
import Slider from './Slider.component'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/Slider',
  component: Slider,
  tags: ['autodocs'],
  argTypes: {
    slidesToShow: {
      control: { type: 'number' }
    },
    arrows: {
      control: { type: 'boolean' }
    },
    dots: {
      control: { type: 'boolean' }
    }
  }
} as Meta

const image = (
  <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="/assets/placeholder.png"
    alt="Empty state"
  />
)

export const Simple: StoryObj<ISlider> = {
  render: args => (
    <div
      style={{
        maxWidth: '750px',
        margin: 'auto'
      }}
    >
      <Slider
        slidesToShow={2}
        slidesToScroll={1}
        infinite={false}
        spacing={'1rem'}
        mediaQueries={{
          900: {
            slidesToShow: 2
          },
          500: {
            slidesToShow: 1
          }
        }}
        {...args}
      >
        <div>{image}</div>
        <div>{image}</div>
        <div>{image}</div>
        <div>{image}</div>
        <div>{image}</div>
        <div>{image}</div>
      </Slider>
    </div>
  ),
  args: {
    slidesToShow: 3,
    arrows: true,
    dots: true
  }
}