/**
 * 钱包余额组件
 * 显示用户的钱包余额
 */

import React, { useMemo } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useColorScheme, useThemeColors } from '@/theme';
import { createThemeStyles } from '@/theme';
import Ionicons from '@expo/vector-icons/Ionicons';

/**
 * 创建主题样式
 */
const styles = createThemeStyles((colors) => ({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  label: {
    fontSize: 12,
    color: colors.text + '80',
  },
  amount: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.primary,
  },
  currency: {
    fontSize: 12,
    color: colors.text + '80',
    marginLeft: 4,
  },
  refreshButton: {
    padding: 4,
  },
}));

interface WalletAmountProps {
  balance?: number;
  label?: string;
  showRefresh?: boolean;
  onRefresh?: () => void;
}

/**
 * 钱包余额组件
 */
export default function WalletAmount({
  balance = 0,
  label = '余额：',
  showRefresh = false,
  onRefresh,
}: WalletAmountProps) {
  const colorScheme = useColorScheme();
  const s = styles[colorScheme];
  const themeColors = useThemeColors();

  // 格式化金额
  const formattedBalance = useMemo(() => {
    return balance.toFixed(2);
  }, [balance]);

  return (
    <View style={s.container}>
      {label && <Text style={s.label}>{label}</Text>}
      <Text style={s.amount}>¥ {formattedBalance}</Text>
      {showRefresh && (
        <TouchableOpacity style={s.refreshButton} onPress={onRefresh} activeOpacity={0.7}>
          <Ionicons name="refresh" size={14} color={themeColors.primary} />
        </TouchableOpacity>
      )}
    </View>
  );
}