import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { Pressable, Text, View } from 'react-native';

interface MenuRowProps {
  icon: keyof typeof Ionicons.glyphMap;
  iconBgClass?: string;
  iconColorClass?: string;
  label: string;
  onPress?: () => void;
  right?: React.ReactNode;
}

/**
 * 设置菜单行 — 左侧图标 + 标签，右侧 chevron 或自定义内容
 * 遵循 "No-Divider" 规则，不使用分隔线
 */
export function MenuRow({
  icon,
  iconBgClass = 'bg-blue-50',
  iconColorClass,
  label,
  onPress,
  right,
}: MenuRowProps) {
  return (
    <Pressable
      onPress={onPress}
      className="flex-row items-center px-5 py-4 active:bg-surface-container-low"
    >
      <View className={`w-10 h-10 rounded-lg items-center justify-center mr-4 ${iconBgClass}`}>
        <Ionicons name={icon} size={22} color={iconColorClass ?? '#004ac6'} />
      </View>
      <Text className="flex-1 font-semibold text-on-surface text-base">{label}</Text>
      {right ?? <Ionicons name="chevron-forward" size={20} color="#c3c6d7" />}
    </Pressable>
  );
}
