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

type FlexDirection = 'row' | 'col'

interface PropsType {
  flexDirection?: FlexDirection
  onClick?: Function
  circle?: boolean
  children?: ReactNode
  customStyle?: React.CSSProperties
  customClassName?: string
}

const LayoutBlock: FC<PropsType> = (props) => {
  const { flexDirection = 'col', circle = false, children, customStyle = {}, customClassName = '', onClick } = props

  const getClassName = () => {
    const classObject = {
      [styles['layoutBlock--circle']]: circle,
      [styles[`layoutBlock--${flexDirection}`]]: flexDirection,
    }
    return classObject
  }

  const handleClick = (event) => {
    console.log('event==>', event)
    onClick && onClick()
  }

  return (
    <View
      className={classnames(styles.layoutBlock, getClassName(), customClassName)}
      style={customStyle}
      onClick={handleClick}
    >
      {children}
    </View>
  )
}
export default LayoutBlock
