import { View, Text } from '@tarojs/components'

interface CellRowProps {
  title: string
  subtitle?: string
  extra?: string
  statusText?: string
  statusColor?: string
  showArrow?: boolean
  onClick?: () => void
}

export default function CellRow({
  title,
  subtitle,
  extra,
  statusText,
  statusColor,
  showArrow = true,
  onClick,
}: CellRowProps) {
  return (
    <View
      className='flex items-center justify-between px-4 py-3 bg-white border-b border-gray-50'
      onClick={onClick}
    >
      <View className='flex-1 mr-2'>
        <View className='flex items-center gap-2 flex-wrap'>
          <Text className='text-sm text-gray-800'>{title}</Text>
          {statusText && (
            <Text
              className='text-xs px-1.5 py-0.5 rounded-full'
              style={{ color: statusColor, background: (statusColor || '#999') + '22' }}
            >
              {statusText}
            </Text>
          )}
        </View>
        {subtitle && (
          <Text className='text-xs text-gray-400 mt-1 block'>{subtitle}</Text>
        )}
      </View>
      {extra && <Text className='text-sm text-gray-500 mr-2'>{extra}</Text>}
      {showArrow && <Text className='text-gray-300'>→</Text>}
    </View>
  )
}