import React from 'react';

const EquipmentChangeInfo = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Change Equipment Info</h3>
            </div>
            <div className="widget-content">
                <div style={{ maxWidth: '800px', margin: '0 auto', background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '8px' }}>
                    <h4>Update Details manually</h4>
                    <p style={{ color: 'var(--text-secondary)', marginBottom: '1rem' }}>Use this for correcting data entry errors. For operational status changes, use the Swap or Maintenance modules.</p>

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                        <div>
                            <label>Part Number</label>
                            <input type="text" readOnly value="PT6C-67C" style={{ width: '100%', padding: '0.5rem', background: '#333', border: 'none', color: '#999' }} />
                        </div>
                        <div>
                            <label>Description</label>
                            <input type="text" defaultValue="Turboshaft Engine" style={{ width: '100%', padding: '0.5rem', background: 'var(--bg-primary)', border: '1px solid var(--border-color)', color: 'var(--text-primary)' }} />
                        </div>
                    </div>
                    <div style={{ marginTop: '1rem', textAlign: 'right' }}>
                        <button className="btn-primary">Update</button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EquipmentChangeInfo;
