import type { Colors } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export interface InfoCardProps {
  label: string;
  value: string;
  icon: keyof typeof Ionicons.glyphMap;
  colors: (typeof Colors)[keyof typeof Colors];
  onPress?: () => void;
  clickable?: boolean;
}

export const InfoCard: React.FC<InfoCardProps> = ({
  label,
  value,
  icon,
  colors,
  onPress,
  clickable = false,
}) => {
  // 渲染图标 - 始终使用普通 View
  const renderIcon = () => {
    return (
      <View style={[
        styles.infoCardIcon,
      ]}>
        <Ionicons name={icon} size={16} color="#4C6EF5" />
      </View>
    );
  };

  // 卡片内容 - icon、label 和箭头在同一行
  const cardContent = (
    <View style={[
      styles.infoCard,
      { backgroundColor: colors.surface || '#fff' }
    ]}>
      <View style={styles.header}>
        {renderIcon()}
        <Text style={[styles.infoCardLabel, { color: colors.textSecondary }]}>{label}</Text>
        {clickable && (
          <View style={styles.infoCardArrow}>
            <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
          </View>
        )}
      </View>
      <Text style={[styles.infoCardValue, { color: colors.text }]}>{value}</Text>
    </View>
  );

  // 如果可点击且有onPress回调，使用TouchableOpacity包装
  if (clickable && onPress) {
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={onPress}
        activeOpacity={0.7}
      >
        {cardContent}
      </TouchableOpacity>
    );
  }
  
  // 不可点击的版本
  return (
    <View style={styles.container}>
      {cardContent}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  infoCard: {
    flex: 1,
    borderRadius: 20,
    padding: 16,
    backgroundColor: '#FFFFFF',
    gap: 8,
    position: 'relative',
  },
  infoCardArrow: {
    marginLeft: 'auto',
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  infoCardIcon: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  infoCardLabel: {
    fontSize: 13,
    color: '#6B7280',
  },
  infoCardValue: {
    fontSize: 14,
    fontWeight: '600',
    color: '#1F2933',
  },
});

export default InfoCard;