import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { CustomLabel } from '../index'
import classnames from 'classnames'
import './index.scss'

interface Props {
  term: string
  help?: string
  required?: boolean
  value?: string | number
  addonAfter?: string
  style?: any
  layout?: 'row' | 'column' | undefined
  listItemChildren?: boolean
}

const Index: React.FC<Props> = ({ term, help, value, addonAfter, style, layout, listItemChildren }) => {
  const containerCLs = classnames(['unedit-container', listItemChildren ? 'item-container' : 'item-container-margin'])
  const contentCls = classnames(['unedit-content', layout === 'column' ? 'column-layout' : ''])
  return (
    <View className={containerCLs} style={{ display: 'flex', flexDirection: layout || 'row', ...style }} >
      <CustomLabel term={`${term}`} help={help} />
      <View className={contentCls}>
        <Text className='unedit-text'>{value}</Text>
        {addonAfter && <Text className='unedit-addon-after'>{addonAfter}</Text>}
      </View>
    </View>
  )
}

export default Index