import React from 'react';

const EquipmentSwap = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Swap Equipment</h3>
            </div>
            <div className="widget-content">
                <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: '2rem', alignItems: 'center' }}>
                    <div style={{ background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '8px', border: '1px solid #e74c3c' }}>
                        <h4 style={{ color: '#e74c3c', marginBottom: '1rem' }}>To Remove (Off-Wing)</h4>
                        <input type="text" placeholder="Select Equipment..." style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px' }} />
                        <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Reason for Removal:</div>
                        <textarea style={{ width: '100%', marginTop: '0.5rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px' }}></textarea>
                    </div>

                    <div style={{ fontSize: '2rem' }}>➡</div>

                    <div style={{ background: 'var(--bg-secondary)', padding: '1.5rem', borderRadius: '8px', border: '1px solid #2ecc71' }}>
                        <h4 style={{ color: '#2ecc71', marginBottom: '1rem' }}>To Install (On-Wing)</h4>
                        <input type="text" placeholder="Select Replacement..." style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px' }} />
                        <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Cert Number (Form 1):</div>
                        <input type="text" style={{ width: '100%', marginTop: '0.5rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px', padding: '0.5rem' }} />
                    </div>
                </div>
                <div style={{ marginTop: '2rem', textAlign: 'center' }}>
                    <button className="btn-primary" style={{ padding: '0.75rem 2rem', fontSize: '1.1rem' }}>Execute Swap</button>
                </div>
            </div>
        </div>
    );
};

export default EquipmentSwap;
