BalanceHeader.tsx

interface BalanceHeaderProps {
  walletName: string | undefined;
  balanceBtc: number;
  fiatRate: number;
  fiatBalance: number;
  currency: string;
  onCurrencyChange: (currency: string) => void;
  onSend: () => void;
  onReceive: () => void;
  onRefresh: () => void;
  loading: boolean;
}

export default function BalanceHeader({
  walletName,
  balanceBtc,
  fiatRate,
  fiatBalance,
  currency,
  onCurrencyChange,
  onSend,
  onReceive,
  onRefresh,
  loading,
}: BalanceHeaderProps) {
  return (
    <header className="balance-header">
      <div className="balance-group">
        <div className="balance-btc">
          <span className="balance-btc-value">{balanceBtc.toFixed(8)}</span>
          <span className="balance-btc-unit">BTC</span>
        </div>
        {fiatRate > 0 && (
          <div className="balance-fiat">
            <span>≈ {fiatBalance.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {currency}</span>
            <span className="balance-fiat-rate">
              (${fiatRate.toLocaleString('en-US', { maximumFractionDigits: 0 })}/BTC)
            </span>
          </div>
        )}
      </div>

      <div className="balance-wallet-name">
        {walletName}
      </div>

      <div className="balance-actions">
        <button className="btn btn-secondary btn-small" onClick={onReceive}>
          ↓ Receive
        </button>
        <button className="btn btn-primary btn-small" onClick={onSend}>
          ↑ Send
        </button>
      </div>

      <button
        className={`header-refresh ${loading ? 'spinning' : ''}`}
        onClick={onRefresh}
        disabled={loading}
        title="Refresh"
      >
        ↻
      </button>
    </header>
  );
}