import React from 'react';

const EquipmentDetach = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Detach Equipment (Independent)</h3>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '2rem', borderRadius: '8px', maxWidth: '600px', margin: '0 auto', textAlign: 'center' }}>
                    <p style={{ marginBottom: '2rem', color: 'var(--text-secondary)' }}>
                        Confirm removal of equipment from generic storage locations.
                    </p>
                    <input type="text" placeholder="Scan Barcode / QR" style={{ padding: '0.75rem', width: '100%', borderRadius: '4px', border: '1px solid var(--border-color)', marginBottom: '1rem', background: 'var(--bg-primary)', color: 'var(--text-primary)' }} />
                    <button className="btn-primary">Search & Detach</button>
                </div>
            </div>
        </div>
    );
};

export default EquipmentDetach;
