import React from 'react';

const StatsCard = ({ title, value, icon: Icon, trend }) => {
    return (
        <div className="glass-panel" style={{ padding: 'var(--space-lg)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                    <p style={{ color: 'var(--text-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-xs)' }}>{title}</p>
                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold' }} className="text-glow">{value}</h3>

                    {trend && (
                        <div style={{ marginTop: 'var(--space-sm)', fontSize: '0.75rem', color: trend > 0 ? 'var(--status-online)' : 'var(--status-offline)' }}>
                            {trend > 0 ? '↑' : '↓'} {Math.abs(trend)}% from last hour
                        </div>
                    )}
                </div>

                <div style={{
                    padding: '12px',
                    borderRadius: '12px',
                    background: 'rgba(0, 240, 255, 0.1)',
                    color: 'var(--primary)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <Icon size={24} />
                </div>
            </div>

            {/* Decorative Glow */}
            <div style={{
                position: 'absolute',
                bottom: '-20px',
                right: '-20px',
                width: '100px',
                height: '100px',
                background: 'var(--primary)',
                filter: 'blur(50px)',
                opacity: 0.1,
                pointerEvents: 'none'
            }} />
        </div>
    );
};

export default StatsCard;