import * as React from 'react'

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

import { MsBanner } from './'
import { LxText, LxBox } from '@lx-react-materiel/components'

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

export default meta
type Story = StoryObj<typeof meta>

export const Basic = {
  args: {
    width: '100%',
    height: 360,
    title: '买二手车',
    src: 'https://t.lxstatic.com/dos/ms-mp/1.19.2/diy/benz/feature/Banner/assets/banner-bg1.png',
    iconSrc: 'https://t.lxstatic.com/dos/ms-mp/1.19.2/diy/benz/feature/Banner/icon/arrow@2x.png',
    desc: '123123',
    onClick: () => {
      console.log('---123123123')
    }
  }
} satisfies Story

export const BasicWithTextImageProps = {
  args: {
    width: 440,
    height: 355,
    title: '买二手车',
    src: 'https://t.lxstatic.com/dos/ms-mp/1.19.2/diy/benz/feature/Banner/assets/banner-bg1.png',
    iconSrc: 'https://t.lxstatic.com/dos/ms-mp/1.19.2/diy/benz/feature/Banner/icon/arrow@2x.png',
    desc: '123123',
    direction: 'column',
    textProps: {
      fontSize: 24,
      fontWeight: 'bold'
    },
    imageProps: {
      marginTop: 2
    },
    contentProps: {
      paddingTop: 20,
      paddingBottom: 20,
      paddingRight: 20,
      paddingLeft: 20
    }
  }
} satisfies Story

export const Column = {
  args: {
    width: 335,
    height: 450,
    title: '预约试驾',
    src: 'https://t.lxstatic.com/dos/ms-mp/1.19.2/diy/benz/feature/Banner/assets/banner-bg1.png',
    direction: 'column',
    iconSrc: 'https://t.lxstatic.com/dos/ms-mp/1.19.2/diy/benz/feature/Banner/icon/arrow@2x.png',
    desc: (
      <LxBox>
        <LxText>服务顾问将会与您联系</LxText>
        <LxText>试驾时间以门店规定</LxText>
      </LxBox>
    )
  },
  render: (arg: any) => {
    return (
      <LxBox padding={30} backgroundColor="#111111" display="flex" justifyContent="space-between">
        <MsBanner {...arg} />
        <MsBanner {...arg} />
      </LxBox>
    )
  }
} satisfies Story