import React from 'react';

const MinimumEquipmentList = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Minimum Equipment List (MEL)</h3>
                <button className="btn-primary">Add New Entry</button>
            </div>
            <div className="widget-content">
                <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '1rem', height: '100%' }}>
                    <div style={{ background: 'var(--bg-secondary)', borderRadius: '8px', padding: '1rem', overflowY: 'auto' }}>
                        <h4 style={{ marginBottom: '1rem' }}>ATA Chapters</h4>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                            <div style={{ padding: '0.5rem', background: 'var(--accent-primary)', color: 'white', borderRadius: '4px' }}>21 - Air Conditioning</div>
                            <div style={{ padding: '0.5rem', background: 'var(--bg-primary)', borderRadius: '4px' }}>22 - Auto Flight</div>
                            <div style={{ padding: '0.5rem', background: 'var(--bg-primary)', borderRadius: '4px' }}>23 - Communications</div>
                            <div style={{ padding: '0.5rem', background: 'var(--bg-primary)', borderRadius: '4px' }}>24 - Electrical Power</div>
                            <div style={{ padding: '0.5rem', background: 'var(--bg-primary)', borderRadius: '4px' }}>25 - Equipment / Furnishings</div>
                        </div>
                    </div>

                    <div style={{ background: 'var(--bg-secondary)', borderRadius: '8px', padding: '1rem', overflowY: 'auto' }}>
                        <h4 style={{ marginBottom: '1rem' }}>Chapter 21: Air Conditioning</h4>

                        <div style={{ border: '1px solid var(--border-color)', borderRadius: '4px', padding: '1rem', marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
                                <strong>21-10-01: Air Cycle Machine</strong>
                                <span style={{ background: '#f1c40f', color: '#000', padding: '0 0.5rem', borderRadius: '4px', fontSize: '0.8rem' }}>Cat C</span>
                            </div>
                            <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', marginBottom: '0.5rem' }}>
                                One may be inoperative provided flight is conducted below 10,000 ft.
                            </p>
                            <div style={{ display: 'flex', gap: '1rem', fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
                                <span>Installed: 2</span>
                                <span>Required: 1</span>
                            </div>
                        </div>

                        <div style={{ border: '1px solid var(--border-color)', borderRadius: '4px', padding: '1rem' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
                                <strong>21-20-00: Recirculation Fan</strong>
                                <span style={{ background: '#f1c40f', color: '#000', padding: '0 0.5rem', borderRadius: '4px', fontSize: '0.8rem' }}>Cat C</span>
                            </div>
                            <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', marginBottom: '0.5rem' }}>
                                May be inoperative.
                            </p>
                            <div style={{ display: 'flex', gap: '1rem', fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
                                <span>Installed: 2</span>
                                <span>Required: 0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MinimumEquipmentList;
