/**
 * Usage:
 *
 * <View>巴拉巴拉小魔仙</View>
 * <Divider direction="vertical" borderStyle="solid"></Divider
 * <View>全身变</View>
 *
 */

import { View } from '@tarojs/components'
import type { FC, ReactNode } from 'react'
import React from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'

interface DividerProps {
  direction?: 'horizontal' | 'vertical'
  borderStyle?: BorderStype
  contentPosition?: 'left' | 'center' | 'right'
  children?: ReactNode
  customClassName?: string
  customStyles?: React.CSSProperties
}
const Divider: FC<DividerProps> = (props) => {
  const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName = '', customStyles = {} } = props

  const classname = classnames(styles.divider, styles[`divider-${direction}`], customClassName)
  const contentClassname = classnames(styles['divider-text'], styles[`is-${contentPosition}`])

  const borderTopStyle: { borderTopStyle: BorderStype } = {
    borderTopStyle: borderStyle,
  }
  const borderLeftStyle: { borderLeftStyle: BorderStype } = {
    borderLeftStyle: borderStyle,
  }

  const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle

  return (
    <View className={classname} style={{ ...dividerStyle, ...customStyles }}>
      {props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
    </View>
  )
}
export default Divider
