import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { COLORS, FONTS } from '../constants/theme';
import { BalanceInfo } from '../types';
import { formatRupiah } from '../utils/helpers';

interface BalanceCardProps {
  balance: BalanceInfo;
}

export const BalanceCard: React.FC<BalanceCardProps> = ({ balance }) => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.col}>
          <Text style={styles.label}>Pemasukan</Text>
          <Text style={[styles.amount, styles.income]}>
            +{formatRupiah(balance.income)}
          </Text>
        </View>
        <View style={styles.col}>
          <Text style={styles.label}>Pengeluaran</Text>
          <Text style={[styles.amount, styles.expense]}>
            -{formatRupiah(balance.expense)}
          </Text>
        </View>
      </View>
      <View style={styles.divider} />
      <View style={styles.totalContainer}>
        <Text style={styles.totalLabel}>Total Saldo</Text>
        <Text style={styles.totalAmount}>
          {formatRupiah(
balance.total
)}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.card,
    margin: 16,
    padding: 20,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  col: {
    flex: 1,
    alignItems: 'center',
  },
  label: {
    fontSize: FONTS.small,
    color: COLORS.textSecondary,
    marginBottom: 4,
  },
  amount: {
    fontSize: FONTS.regular,
    fontWeight: '600',
  },
  income: {
    color: COLORS.income,
  },
  expense: {
    color: COLORS.expense,
  },
  divider: {
    height: 1,
    backgroundColor: COLORS.border,
    marginVertical: 16,
  },
  totalContainer: {
    alignItems: 'center',
  },
  totalLabel: {
    fontSize: FONTS.small,
    color: COLORS.textSecondary,
    marginBottom: 4,
  },
  totalAmount: {
    fontSize: FONTS.xlarge,
    fontWeight: 'bold',
    color: COLORS.text,
  },
});