import React from 'react';

const RemovalEquipmentList = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Removal Equipment List</h3>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                    <p>List of equipment removed from fleet requiring disposition (Repair/Scrap/Stock).</p>
                </div>
                <div style={{ marginTop: '1rem' }}>
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                        <thead>
                            <tr style={{ background: 'rgba(0,0,0,0.2)', textAlign: 'left' }}>
                                <th style={{ padding: '1rem' }}>Part Number</th>
                                <th style={{ padding: '1rem' }}>Serial Number</th>
                                <th style={{ padding: '1rem' }}>Removed From</th>
                                <th style={{ padding: '1rem' }}>Date</th>
                                <th style={{ padding: '1rem' }}>Reason</th>
                                <th style={{ padding: '1rem' }}>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '1rem' }}>STARTER-GEN-01</td>
                                <td style={{ padding: '1rem' }}>SG-882</td>
                                <td style={{ padding: '1rem' }}>9M-WSA</td>
                                <td style={{ padding: '1rem' }}>2025-01-10</td>
                                <td style={{ padding: '1rem' }}>Fail on start</td>
                                <td style={{ padding: '1rem' }}><button className="btn-primary">Create Work Order</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default RemovalEquipmentList;
