1  "use client"
 2  import { Wifi, WifiOff, Layers, Hash, HardDrive, CheckCircle } from "lucide-react"
 3  import { formatNumber, formatBytes } from '@/services/api/main'
 4  import { useNetwork } from '@/contexts/networkcontext'
 5  interface NetworkData {
 6    latestBlock: number
 7    totalTransactions: number
 8    totalPayloadSize: number
 9    successRate: number
10    isConnected: boolean
11  }
12  
13  interface LiveStatsProps {
14    liveStreaming: boolean
15    networkData: NetworkData
16  }
17  
18  export default function LiveStats({ liveStreaming, networkData }: LiveStatsProps) {
19    const { currentNetwork, switchNetwork, isMainnet, isTestnet } = useNetwork();
20    
21    return (
22      <div className="text-center space-y-6">
23        <h1 className="text-3xl font-medium tracking-wide text-gray-900">COMPOSABLE SCAN</h1>
24        <div className="flex items-center justify-center gap-x-4 text-sm text-gray-600 overflow-x-auto">
25          <span className="flex items-center gap-2 whitespace-nowrap">
26            {networkData.isConnected ? (
27              <Wifi className="w-4 h-4 text-green-500" />
28            ) : (
29              <WifiOff className="w-4 h-4 text-red-500" />
30            )}
31            <button
32              onClick={() => switchNetwork(isMainnet ? 'testnet' : 'mainnet')}
33              className={`
34                px-3 py-1 text-xs font-bold rounded-full transition-all duration-200 shadow-sm
35                ${isMainnet 
36                  ? 'bg-green-500 hover:bg-green-600 text-white' 
37                  : 'bg-orange-500 hover:bg-orange-600 text-white'
38                }
39              `}
40              title={`Switch to ${isMainnet ? 'testnet' : 'mainnet'}`}
41            >
42              {currentNetwork.toUpperCase()}
43            </button>
44          </span>
45          <span className="flex items-center gap-1 whitespace-nowrap">
46            <Layers className="w-4 h-4 text-gray-500" />
47            <span className="font-mono">Block #{networkData.latestBlock}</span>
48          </span>
49          <span className="flex items-center gap-1 whitespace-nowrap">
50            <Hash className="w-4 h-4 text-gray-500" />
51            <span className="font-mono">TXs: #{networkData.totalTransactions}</span>
52          </span>
53          <span className="flex items-center gap-1 whitespace-nowrap">
54            <HardDrive className="w-4 h-4 text-gray-500" />
55            <span className="font-mono">Data: {formatBytes(networkData.totalPayloadSize)}</span>
56          </span>
57          <span className="flex items-center gap-1 whitespace-nowrap">
58            <CheckCircle className="w-4 h-4 text-gray-500" />
59            <span className="font-mono">Success: {(networkData.successRate * 100).toFixed(2)}%</span>
60          </span>
61        </div>
62      </div>
63    )
64  }