import React, { useEffect, useState } from 'react';
import { StyleSheet, ActivityIndicator } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from './ThemedView';

export default function BalancesSection() {
  const [ethBalance, setEthBalance] = useState(null);
  const [usdtBalance, setUsdtBalance] = useState(null);

  useEffect(() => {
    const fetchBalances = async () => {
      try {
        const [eth, usdt] = await Promise.all([
          fetch('/api/ethBalance').then(res => res.json()),
          fetch('/api/usdtBalance').then(res => res.json()),
        ]);
        setEthBalance(eth.balance);
        setUsdtBalance(usdt.balance);
      } catch (error) {
        console.error('Failed to fetch balances:', error);
      }
    };

    fetchBalances();
  }, []);

  return (
    <ThemedView>
      {ethBalance && usdtBalance ? (
        <>
          <ThemedText>ETH: {ethBalance}</ThemedText>
          <ThemedText>USDT: {usdtBalance}</ThemedText>
        </>
      ) : (
        <ActivityIndicator />
      )}
    </ThemedView>
  );
}

const styles = StyleSheet.create({});