import { Ionicons } from '@expo/vector-icons';
import type { ComponentProps } from 'react';
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { StatusBadge } from './status-badge';

interface ListRowProps {
  icon: keyof typeof Ionicons.glyphMap;
  iconBgClass?: string;
  iconColor?: string;
  title: string;
  subtitle?: string;
  /** 右侧徽章 */
  badgeText?: string;
  badgeVariant?: ComponentProps<typeof StatusBadge>['variant'];
  /** 自定义右侧元素（如 switch） */
  right?: React.ReactNode;
  onPress?: () => void;
}

/**
 * 通用列表行 — 图标 + 标题/副标题 + 可选徽章/右侧控件
 * 遵循 "No-Divider" 规则，通过 padding 和背景变化分隔
 */
export function ListRow({
  icon,
  iconBgClass = 'bg-blue-50',
  iconColor = '#2563eb',
  title,
  subtitle,
  badgeText,
  badgeVariant = 'error',
  right,
  onPress,
}: ListRowProps) {
  return (
    <Pressable
      onPress={onPress}
      className="flex-row items-center justify-between p-5 active:bg-surface-container-low"
    >
      <View className="flex-row items-center gap-4 flex-1">
        <View className={`w-10 h-10 rounded-xl items-center justify-center ${iconBgClass}`}>
          <Ionicons name={icon} size={22} color={iconColor} />
        </View>
        <View className="flex-1">
          <Text className="font-semibold text-on-surface">{title}</Text>
          {subtitle && (
            <Text className="text-xs text-on-surface-variant mt-0.5">{subtitle}</Text>
          )}
        </View>
      </View>
      <View className="flex-row items-center gap-2">
        {badgeText && <StatusBadge text={badgeText} variant={badgeVariant} />}
        {right ?? <Ionicons name="chevron-forward" size={20} color="#737686" />}
      </View>
    </Pressable>
  );
}
