import React from 'react';

const ModificationDetails = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Modification Details: MOD-139-001</h3>
                <button className="btn-secondary">Back</button>
            </div>
            <div className="widget-content">
                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '2rem' }}>
                    <div style={{ background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '8px' }}>
                        <h4 style={{ marginBottom: '1rem' }}>Description</h4>
                        <p style={{ lineHeight: '1.6', color: 'var(--text-secondary)' }}>
                            Installation of high-intensity searchlight for SAR operations. Includes structural reinforcement on the left-hand side fuselage and electrical wiring integration.
                        </p>

                        <h4 style={{ marginTop: '1.5rem', marginBottom: '1rem' }}>References</h4>
                        <ul style={{ paddingLeft: '1.5rem', color: 'var(--text-secondary)' }}>
                            <li>STC: SA02342NY</li>
                            <li>SB: 139-456</li>
                            <li>Drawings: DWG-139-SL-01 to 05</li>
                        </ul>
                    </div>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                            <h4 style={{ marginBottom: '0.5rem' }}>Status</h4>
                            <div style={{ fontSize: '1.2rem', color: '#2ecc71', fontWeight: 'bold' }}>Approved</div>
                        </div>

                        <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                            <h4 style={{ marginBottom: '0.5rem' }}>Applicability</h4>
                            <div>AW139 (S/N 31001-31200)</div>
                        </div>

                        <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                            <h4 style={{ marginBottom: '0.5rem' }}>Compliance</h4>
                            <button className="btn-primary" style={{ width: '100%' }}>Apply to Fleet</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ModificationDetails;
