import React from 'react'
import { View } from '@tarojs/components'
import './index.css'

interface CellGroupProps {
  title?: string
  bordered?: boolean
  theme?: 'card'
  children?: React.ReactNode
  className?: string
}

export default function TDesignCellGroup({
  title,
  bordered = true,
  theme,
  children,
  className = ''
}: CellGroupProps) {
  return (
    <View className={`tdesign-cell-group ${className}`}>
      {title && (
        <View className="tdesign-cell-group__title">
          {title}
        </View>
      )}

      <View
        className={`
          tdesign-cell-group__content
          ${bordered ? 'tdesign-cell-group--bordered' : ''}
          ${theme ? `tdesign-cell-group--${theme}` : ''}
        `}
      >
        {children}
      </View>
    </View>
  )
}