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

import { LxImage } from './'

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

export default meta
type Story = StoryObj<typeof meta>

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Basic = {
  args: {
    src: 'https://t.lxstatic.com/dos/ucma/2.9.7/discovery.png'
  }
} satisfies Story

/**
 * 传入样式
 */
export const WitchStyles = {
  args: {
    ...Basic.args,
    className: 'custom-class',
    width: 150,
    height: 150,
    marginTop: 20
  }
} satisfies Story

/**
 * 点击事件
 */
export const WitchOnClick = {
  args: {
    ...Basic.args,
    onClick: (e) => { console.log('onclick', e) }
  }
} satisfies Story

/**
 * 预览图片
 */
export const WitchUrls = {
  args: {
    ...Basic.args,
    urls: [
      'https://t.lxstatic.com/dos/ucma/2.9.7/discovery.png',
      'https://t.lxstatic.com/dos/ucma/2.9.7/subscribe.png'
    ]
  }
} satisfies Story