import React from 'react';
import { useDownloadContext } from '../context/DownloadContext/DownloadContext';

export const DownloadDebugger: React.FC = () => {
    const downloadContext = useDownloadContext();
    
    if (!downloadContext) return null;
    
    const { downloads, activeCount, completedCount, failedCount } = downloadContext;
    
    return (
        <div style={{
            position: 'fixed',
            top: '10px',
            right: '10px',
            background: 'rgba(0,0,0,0.8)',
            color: 'white',
            padding: '10px',
            borderRadius: '5px',
            fontSize: '12px',
            zIndex: 9999,
            maxWidth: '300px',
            maxHeight: '200px',
            overflow: 'auto'
        }}>
            <h4>Download Debug Info</h4>
            <p>Active: {activeCount} | Completed: {completedCount} | Failed: {failedCount}</p>
            <p>Downloads State:</p>
            <pre style={{ fontSize: '10px', overflow: 'auto' }}>
                {JSON.stringify(downloads, null, 2)}
            </pre>
        </div>
    );
};