/**
 * Live Traffic Cards
 * Ball Studios <https://git.balls.studio>
 */

import React from 'react';

interface LiveStats {
    rx_bytes: number;
    tx_bytes: number;
    recorded_at: string;
}

function formatBytes(bytes: number): string {
    if (bytes < 1024)          return `${bytes} B`;
    if (bytes < 1024 * 1024)   return `${(bytes / 1024).toFixed(1)} KB`;
    if (bytes < 1024 ** 3)     return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
}

interface Props { live: LiveStats | null; }

export default function LiveTrafficCards({ live }: Props) {
    return (
        <div className='addon-stat-grid'>
            <div className='addon-stat-card inbound'>
                <div className='addon-stat-label'>⬇ Inbound</div>
                <div className='addon-stat-value'>{live ? formatBytes(live.rx_bytes) : '—'}</div>
            </div>
            <div className='addon-stat-card outbound'>
                <div className='addon-stat-label'>⬆ Outbound</div>
                <div className='addon-stat-value'>{live ? formatBytes(live.tx_bytes) : '—'}</div>
            </div>
            <div className='addon-stat-card total'>
                <div className='addon-stat-label'>⇅ Total</div>
                <div className='addon-stat-value'>{live ? formatBytes(live.rx_bytes + live.tx_bytes) : '—'}</div>
            </div>
            <div className='addon-stat-card updated'>
                <div className='addon-stat-label'>🕐 Last Update</div>
                <div className='addon-stat-value'>{live ? new Date(live.recorded_at).toLocaleTimeString() : '—'}</div>
            </div>
        </div>
    );
}