src/components/UI/Badge.jsx

import React from 'react';

const Badge = ({ status, text }) => {
    const getStatusColor = (s) => {
        switch (s?.toLowerCase()) {
            case 'online': return 'var(--status-online)';
            case 'offline': return 'var(--status-offline)';
            case 'roaming': return 'var(--status-roaming)';
            case '5g': return 'var(--primary)';
            case '4g lte': return '#a855f7';
            default: return 'var(--text-muted)';
        }
    };

    const color = getStatusColor(status);

    return (
        <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '6px',
            padding: '4px 10px',
            borderRadius: '20px',
            background: `color-mix(in srgb, ${color} 15%, transparent)`,
            color: color,
            fontSize: '0.75rem',
            fontWeight: 600,
            border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`
        }}>
            <span style={{
                width: '6px',
                height: '6px',
                borderRadius: '50%',
                backgroundColor: color,
                boxShadow: `0 0 5px ${color}`
            }} />
            {text || status}
        </span>
    );
};

export default Badge;