import * as React from 'react'

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

import { LxSemiCircle } from './'

import { LxBox } from '../lxBox'

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

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 BasicTypeRight = {
  args: {
    size: 30,
    backgroundColor: 'orange',
    type: 'right'
  }
} satisfies Story

/**
 * 右边内凹半圆
 */
export const BasicTypeLeft = {
  args: {
    size: 30,
    backgroundColor: 'orange',
    type: 'left'
  }
} satisfies Story

/**
 * 一起使用示例，布局分割线
 */
export const LxSemiCircleExample = {
  args: {
    size: 30,
    backgroundColor: 'orange'
  },

  render: (args) => {
    return (
      <LxBox display='flex' justifyContent='space-between'>
        <LxSemiCircle {...args} type='right' />
        <LxBox
          flex={1}
          borderBottom='1px dashed red'
          display='flex'
          justifyContent='center'
          alignContent='center'
          height={30}
          margin='0 15px'
        ></LxBox>
        <LxSemiCircle {...args} type='left' />
      </LxBox>
    )
  }
} satisfies Story