import * as React from 'react'

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

import { LxSwiperImages } from './'

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta = {
  title: '基础组件/LxSwiperImages',
  component: LxSwiperImages,
  argTypes: {
  }
} satisfies Meta<typeof LxSwiperImages>

export default meta
type Story = StoryObj<typeof meta>

const imageData = [
  {
    image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png',
    thumbnail_image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png'
  },
  {
    image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png',
    thumbnail_image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png'
  },
  {
    image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png',
    thumbnail_image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png'
  },
  {
    image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png',
    thumbnail_image: 'https://t.lxstatic.com/dos/ucma/2.12.1/customer-service-button-icon-lixin.png'
  }
]

/**
 * 滑动图片组件 基本用法
 *
 * 请查看 Swiper 组件 ：https://taro-docs.jd.com/docs/components/viewContainer/swiper 的用法
 */
export const Basic = {
  args: {
    width: '100%',
    height: 500,
    images: imageData.map((item) => item),
    full: true,
    autoplay: false,
    indicatorDots: true
  }
} satisfies Story