import React from 'react';

const HistEquipmentHierarchy = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Historical Equipment Hierarchy</h3>
            </div>
            <div className="widget-content">
                <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '1rem', height: '100%' }}>
                    <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                        <input type="text" placeholder="Search Aircraft/Component..." style={{ width: '100%', padding: '0.5rem', marginBottom: '1rem', background: 'var(--bg-primary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)', borderRadius: '4px' }} />
                        <ul style={{ listStyle: 'none', padding: 0 }}>
                            <li style={{ padding: '0.5rem', background: 'rgba(255,255,255,0.05)', marginBottom: '0.5rem', borderRadius: '4px' }}>▶ 9M-WSA (Active)</li>
                            <li style={{ padding: '0.5rem', marginBottom: '0.5rem' }}>▶ 9M-WSB (Active)</li>
                        </ul>
                    </div>
                    <div style={{ background: 'var(--bg-secondary)', padding: '2rem', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: '3rem', marginBottom: '1rem', opacity: 0.2 }}>🌳</div>
                            <p>Select a fleet item to view its historical build/hierarchy tree at a specific date.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HistEquipmentHierarchy;
