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

interface MenuItemProps {
  /** 菜单项标题 */
  title: string
  /** 图标类名（Heroicons） */
  icon: string
  /** 图标背景色类名 */
  bgColor: string
  /** 图标颜色类名 */
  iconColor: string
  /** 点击处理函数 */
  onPress: () => void
}

/**
 * 菜单项组件
 * 带圆形图标和右箭头
 * 原型参考: docs/小程序原型/rencai.html (行770-906)
 */
export const MenuItem: React.FC<MenuItemProps> = ({
  title,
  icon,
  bgColor,
  iconColor,
  onPress
}) => {
  return (
    <View
      className="flex flex-row items-center justify-between p-3 rounded-lg hover:bg-gray-50"
      onClick={onPress}
    >
      {/* 左侧：图标和标题 */}
      <View className="flex flex-row items-center">
        {/* 圆形图标背景 */}
        <View className={`w-10 h-10 rounded-full ${bgColor} flex items-center justify-center mr-3`}>
          {/* Heroicons图标 */}
          <View className={`${icon} w-5 h-5 ${iconColor}`} />
        </View>
        <Text className="text-gray-700 text-sm">{title}</Text>
      </View>

      {/* 右箭头 */}
      <View className="i-heroicons-chevron-right-20-solid w-5 h-5 text-gray-400" />
    </View>
  )
}
