import React from 'react';

const EquipmentMonitoring = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Equipment Monitoring</h3>
                <div className="widget-actions">
                    <button className="btn-secondary">Export Report</button>
                    <button className="btn-primary">Scan Item</button>
                </div>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px', marginBottom: '1rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
                    <div style={{ flex: 1, minWidth: '200px' }}>
                        <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Expiring Soon (&lt; 30 Days)</div>
                        <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#f1c40f' }}>12</div>
                    </div>
                    <div style={{ flex: 1, minWidth: '200px' }}>
                        <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Overdue</div>
                        <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#e74c3c' }}>3</div>
                    </div>
                    <div style={{ flex: 1, minWidth: '200px' }}>
                        <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Serviceable</div>
                        <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#2ecc71' }}>156</div>
                    </div>
                </div>

                <div style={{ overflowX: 'auto' }}>
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                        <thead>
                            <tr style={{ background: 'rgba(0,0,0,0.2)', textAlign: 'left' }}>
                                <th style={{ padding: '1rem' }}>Part Number</th>
                                <th style={{ padding: '1rem' }}>Serial #</th>
                                <th style={{ padding: '1rem' }}>Description</th>
                                <th style={{ padding: '1rem' }}>Hours/Cycles</th>
                                <th style={{ padding: '1rem' }}>Remaining</th>
                                <th style={{ padding: '1rem' }}>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>PT6C-67C</td>
                                <td style={{ padding: '1rem' }}>E-12345</td>
                                <td style={{ padding: '1rem' }}>Turboshaft Engine</td>
                                <td style={{ padding: '1rem' }}>1245.5 hrs</td>
                                <td style={{ padding: '1rem' }}>254.5 hrs</td>
                                <td style={{ padding: '1rem' }}><span style={{ color: '#2ecc71' }}>Serviceable</span></td>
                            </tr>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>OXY-GEN-01</td>
                                <td style={{ padding: '1rem' }}>OZ-992</td>
                                <td style={{ padding: '1rem' }}>Oxygen Generator</td>
                                <td style={{ padding: '1rem' }}>-</td>
                                <td style={{ padding: '1rem' }}><span style={{ color: '#e74c3c' }}>-2 Days</span></td>
                                <td style={{ padding: '1rem' }}><span style={{ color: '#e74c3c' }}>Expired</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default EquipmentMonitoring;
