import React from 'react';

const ApplyModToEquipment = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Apply Modification to Equipment</h3>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '2rem', borderRadius: '8px', maxWidth: '600px', margin: '0 auto' }}>
                    <label style={{ display: 'block', marginBottom: '0.5rem' }}>Select Modification</label>
                    <select style={{ width: '100%', padding: '0.75rem', marginBottom: '1.5rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px' }}>
                        <option>SB-PT6-72-123 (Blade Replacement)</option>
                    </select>

                    <label style={{ display: 'block', marginBottom: '0.5rem' }}>Target Equipment (Serial #)</label>
                    <input type="text" placeholder="Scan or Enter S/N" style={{ width: '100%', padding: '0.75rem', marginBottom: '1.5rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px' }} />

                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '1.5rem' }}>
                        <input type="checkbox" id="confirm" />
                        <label htmlFor="confirm">Certify that modification has been embodied according to approved data.</label>
                    </div>

                    <button className="btn-primary" style={{ width: '100%' }}>Record Application</button>
                </div>
            </div>
        </div>
    );
};

export default ApplyModToEquipment;
