import * as React from 'react'

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

import { LxBox } from './'
import { View } from '@tarojs/components'

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

export default meta
type Story = StoryObj<typeof meta>

/**
 * 布局组件 基本用法
 *
 * 请查看 View 组件 ：https://docs.taro.zone/docs/components/viewContainer/view 的用法
 */
export const Basic = {
  args: {
    children: <View>布局组件</View>
  }
} satisfies Story

/**
 * 在基础用法上，还可以传入样式
 *
 * 完整样式请查看，https://styled-system.com/ 里面
 *
 * LayoutProps, SpaceProps, ColorProps, TypographyProps, PositionProps 支持的属性
 */
export const WitchStyles = {
  args: {
    ...Basic.args,
    className: 'custom-class',
    width: 750,
    height: '30vh',
    marginTop: 20,
    backgroundColor: 'orange',
    color: '#fff',
    paddingTop: 20,
    position: 'relative',
    fontSize: 30
  },

  render: (args) => (
    <LxBox className='custom-class' position='relative' fontSize={30} width={750} height={200} marginTop={20} paddingTop={20} backgroundColor='orange' color='#fff' >{ args.children }</LxBox>
  )
} satisfies Story

export const WitchFlex = {
  args: {
    children: <View>布局组件</View>,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }
} satisfies Story