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

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import ErrorImage from './errorImage.png'

import { LxTips } from './'

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

export default meta
type Story = StoryObj<typeof meta>

/**
 * lxTips 基本用法
 */
export const Basic = {
  args: {
    image: ErrorImage,
    description: '服务器走丢了，请稍后再试', // 这里统一错误描述
    width: 340,
    height: 219
  }
} satisfies Story

/**
 * lxTips 基本用法 带上样式
 *
 * 1. 更改距离顶部距离 paddingTop
 * 2. 背景色 backgroundColor
 * 3. 文字颜色 color
 * 4. 文字大小 fontSize
 */
export const BasicWitchStyle = {
  args: {
    ...Basic.args,
    paddingTop: 237,
    backgroundColor: 'orange',
    color: '#868A93',
    fontSize: 33
  }
} satisfies Story