import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';

interface BalanceIndicatorProps {
  /** 各币种余额。 */
  balances: Record<string, string>;
}

/** 借贷平衡指示器（主题化）。所有币种余额为 0 时显示「平衡」。 */
export function BalanceIndicator({ balances }: BalanceIndicatorProps) {
  const { theme } = useTheme();
  const t = useT();
  const allBalanced = Object.values(balances).every(b => b === '0');

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.bgTertiary, borderRadius: theme.radii.sm }]}>
      <Text style={[theme.typography.caption, { color: allBalanced ? theme.colors.success : theme.colors.error, fontWeight: '700' }]}>
        {allBalanced ? t('home.balanced') : t('home.unbalanced')}
      </Text>
      {!allBalanced && Object.entries(balances).map(([cur, amt]) => (
        <Text key={cur} style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>
          {cur}: {amt}
        </Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 8, gap: 2, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center' },
});
