import React from 'react';

const AircraftChangeInfo = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Change Aircraft Info</h3>
                <button className="btn-secondary">Back</button>
            </div>
            <div className="widget-content">
                <div style={{ maxWidth: '800px', background: 'var(--bg-secondary)', padding: '2rem', borderRadius: '8px', margin: '0 auto' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
                        <div>
                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Registration</label>
                            <input type="text" defaultValue="9M-WSA" style={{ width: '100%', padding: '0.75rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }} disabled />
                        </div>
                        <div>
                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Model</label>
                            <input type="text" defaultValue="AW139" style={{ width: '100%', padding: '0.75rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }} disabled />
                        </div>

                        <div>
                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Current Status</label>
                            <select style={{ width: '100%', padding: '0.75rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }}>
                                <option>Active</option>
                                <option>Maintenance</option>
                                <option>Storage</option>
                                <option>Retired</option>
                            </select>
                        </div>
                        <div>
                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Base Location</label>
                            <select style={{ width: '100%', padding: '0.75rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }}>
                                <option>Kuala Lumpur (WMKK)</option>
                                <option>Kota Kinabalu (WBKK)</option>
                                <option>Kerteh (WMKE)</option>
                            </select>
                        </div>

                        <div style={{ gridColumn: 'span 2' }}>
                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Notes</label>
                            <textarea rows="4" style={{ width: '100%', padding: '0.75rem', borderRadius: '4px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-primary)' }}></textarea>
                        </div>
                    </div>
                    <div style={{ marginTop: '2rem', textAlign: 'right' }}>
                        <button className="btn-primary">Save Changes</button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AircraftChangeInfo;
