managarten/memoro/apps/mobile/features/subscription/CostCard.tsx

import React from 'react';
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../theme/ThemeProvider';
import { useTranslation } from 'react-i18next';
import colors from '~/tailwind.config.js';

export interface CostItem {
  action: string;
  actionKey?: string; // Translation key for the action
  cost: number;
  icon: keyof typeof Ionicons.glyphMap;
}

interface CostCardProps {
  title: string;
  costs: CostItem[];
}

export const CostCard: React.FC<CostCardProps> = ({ 
  title,
  costs
}) => {
  const { isDark, themeVariant, tw } = useTheme();
  const { t } = useTranslation();
  
  // Theme-aware colors using the same system as MemoPreview and SettingsToggle
  const themeColors = (colors as any).theme?.extend?.colors;
  const textColor = isDark ? '#FFFFFF' : '#000000';
  const secondaryTextColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)';
  const bgColor = isDark
    ? themeColors?.dark?.[themeVariant]?.contentBackground || '#1E1E1E'
    : themeColors?.[themeVariant]?.contentBackground || '#FFFFFF';
  const borderColor = isDark
    ? themeColors?.dark?.[themeVariant]?.border || '#424242'
    : themeColors?.[themeVariant]?.border || '#e6e6e6';
  const accentColor = '#4287f5'; // Konsistente Mana-Farbe
  
  return (
    <View
      style={{
        backgroundColor: bgColor,
        borderRadius: 12,
        padding: 16,
        borderWidth: 1,
        borderColor: borderColor
      }}
    >
      <Text style={{ color: textColor, fontSize: 20, fontWeight: 'bold' as const, marginBottom: 16 }}>{title}</Text>
      
      <View style={{ gap: 12 }}>
        {costs.map((item, index) => (
          <View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Ionicons name={item.icon} size={18} color={accentColor} />
              <Text style={{ color: secondaryTextColor, fontSize: 14, marginLeft: 8 }}>
                {item.actionKey ? t(item.actionKey, item.action) : item.action}
              </Text>
            </View>
            <Text style={{ color: textColor, fontSize: 16, fontWeight: '600' as const }}>
              {t('subscription.mana_amount', '{{amount}} Mana', { amount: item.cost })}
            </Text>
          </View>
        ))}
      </View>
    </View>
  );
};

export default CostCard;