import React from 'react';

const IntegrationService = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Integration Service</h3>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                    <h4>External API Status</h4>
                    <div style={{ marginTop: '1rem' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem', borderBottom: '1px solid var(--border-color)' }}>
                            <span>ERP Connector</span>
                            <span style={{ color: '#2ecc71' }}>Connected</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem', borderBottom: '1px solid var(--border-color)' }}>
                            <span>Weather Data Feed</span>
                            <span style={{ color: '#2ecc71' }}>Connected</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem' }}>
                            <span>Flight Tracking (ADSB)</span>
                            <span style={{ color: '#f1c40f' }}>Latency High</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default IntegrationService;
