import React from 'react';

const PostponedOpsLists = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Postponed Ops / Deferred Items</h3>
            </div>
            <div className="widget-content">
                {/* HIL / MEL Items */}
                <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' }}>HIL Ref</th>
                                <th style={{ padding: '1rem' }}>Aircraft</th>
                                <th style={{ padding: '1rem' }}>Description</th>
                                <th style={{ padding: '1rem' }}>Cat</th>
                                <th style={{ padding: '1rem' }}>Due Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>HIL-005</td>
                                <td style={{ padding: '1rem' }}>9M-WSB</td>
                                <td style={{ padding: '1rem' }}>LH Nav Light Inop</td>
                                <td style={{ padding: '1rem' }}>C</td>
                                <td style={{ padding: '1rem' }}>2025-01-20</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default PostponedOpsLists;
