import React from 'react';

const DetachEquipment = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Detach Equipment</h3>
            </div>
            <div className="widget-content">
                <div style={{ maxWidth: '800px', margin: '0 auto' }}>
                    <div style={{ marginBottom: '1rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
                        <label>Select Aircraft:</label>
                        <select style={{ padding: '0.5rem', borderRadius: '4px', background: 'var(--bg-secondary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)' }}>
                            <option>9M-WSA (AW139)</option>
                            <option>9M-WSB (AW139)</option>
                        </select>
                    </div>

                    <div style={{ background: 'var(--bg-secondary)', borderRadius: '8px', overflow: 'hidden' }}>
                        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                            <thead>
                                <tr style={{ background: 'rgba(0,0,0,0.2)', textAlign: 'left' }}>
                                    <th style={{ padding: '1rem' }}>Position</th>
                                    <th style={{ padding: '1rem' }}>Part Number</th>
                                    <th style={{ padding: '1rem' }}>Serial Number</th>
                                    <th style={{ padding: '1rem' }}>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                    <td style={{ padding: '1rem' }}>ENG #1</td>
                                    <td style={{ padding: '1rem' }}>PT6C-67C</td>
                                    <td style={{ padding: '1rem' }}>E-12345</td>
                                    <td style={{ padding: '1rem' }}><button className="btn-sm" style={{ background: '#e74c3c', color: 'white' }}>Detach</button></td>
                                </tr>
                                <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                    <td style={{ padding: '1rem' }}>ENG #2</td>
                                    <td style={{ padding: '1rem' }}>PT6C-67C</td>
                                    <td style={{ padding: '1rem' }}>E-12346</td>
                                    <td style={{ padding: '1rem' }}><button className="btn-sm" style={{ background: '#e74c3c', color: 'white' }}>Detach</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DetachEquipment;
