NetworkTab.tsx

interface NetworkTabProps {
  networkInfo: any;
  blockCount: number | null;
  feeEstimate: any;
}

export default function NetworkTab({ networkInfo, blockCount, feeEstimate }: NetworkTabProps) {
  return (
    <div className="tab-content">
      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Block Height</div>
          <div className="stat-value mono">{blockCount ?? '—'}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Fee Rate (6 blocks)</div>
          <div className="stat-value mono">
            {feeEstimate ? `${feeEstimate.feerate_sats_vb}` : '—'}
            <span className="text-tertiary" style={{ fontSize: '14px', marginLeft: '6px' }}>sats/vB</span>
          </div>
          {feeEstimate && (
            <div className="stat-sub">
              ~{feeEstimate.estimated_fee_btc.toFixed(8)} BTC for 1 TX
            </div>
          )}
        </div>
      </div>

      {/* Node Info */}
      <div className="section">
        <div className="section-header">
          <h3>Node Information</h3>
        </div>
        {networkInfo ? (
          <div className="info-grid">
            <div className="info-row">
              <span className="info-label">Node Type</span>
              <span>
                <span className={`badge ${networkInfo.node_type === 'local' ? 'badge-green' : 'badge-blue'}`}>
                  {networkInfo.node_type}
                </span>
              </span>
            </div>
            <div className="info-row">
              <span className="info-label">Network</span>
              <span>
                <span className="badge badge-accent">
                  {networkInfo.network}
                </span>
              </span>
            </div>
            {networkInfo.node_url && (
              <div className="info-row">
                <span className="info-label">Node URL</span>
                <span className="mono" style={{ fontSize: '12px' }}>{networkInfo.node_url}</span>
              </div>
            )}
            {networkInfo.peers !== undefined && (
              <div className="info-row">
                <span className="info-label">Peers</span>
                <span>{networkInfo.peers}</span>
              </div>
            )}
            {networkInfo.version && (
              <div className="info-row">
                <span className="info-label">Version</span>
                <span className="mono">{networkInfo.version}</span>
              </div>
            )}
            {networkInfo.subversion && (
              <div className="info-row">
                <span className="info-label">Subversion</span>
                <span className="mono">{networkInfo.subversion}</span>
              </div>
            )}
            {networkInfo.proxy && (
              <div className="info-row">
                <span className="info-label">Proxy</span>
                <span className="mono">{networkInfo.proxy}</span>
              </div>
            )}
          </div>
        ) : (
          <div className="empty-state">
            <div className="empty-state-icon">⬡</div>
            No network info available
          </div>
        )}
      </div>

      {/* Fee Estimation */}
      <div className="section">
        <div className="section-header">
          <h3>Fee Estimation</h3>
        </div>
        {feeEstimate ? (
          <div className="info-grid">
            <div className="info-row">
              <span className="info-label">Fee Rate</span>
              <span className="mono">{feeEstimate.feerate_sats_vb} sats/vB</span>
            </div>
            <div className="info-row">
              <span className="info-label">Estimated Fee (1 input, 1 output)</span>
              <span className="mono">{(feeEstimate.estimated_fee_btc * 100_000_000).toFixed(0)} sats</span>
            </div>
            <div className="info-row">
              <span className="info-label">Estimated Fee</span>
              <span className="mono">{feeEstimate.estimated_fee_btc.toFixed(8)} BTC</span>
            </div>
          </div>
        ) : (
          <div className="warn-box">
            Fee estimation not available. Check your node connection.
          </div>
        )}
      </div>

      {/* How it works */}
      <div className="section">
        <div className="section-header">
          <h3>About</h3>
        </div>
        <div style={{ fontSize: '14px', color: 'var(--text-secondary)', lineHeight: '1.7' }}>
          <p style={{ marginBottom: '12px' }}>
            This wallet connects to a Bitcoin node for address scanning and transaction broadcasting.
            Your wallet data is stored locally and encrypted when enabled.
          </p>
          <p>
            <strong>Node type:</strong> {networkInfo?.node_type === 'local'
              ? 'You are running a full node locally — maximum privacy and trust.'
              : 'You are using a remote electrum or RPC node.'
            }
          </p>
        </div>
      </div>
    </div>
  );
}