const Panel = ({ id, title, children, onToggleSize, onClose, isMaximized = false, actions = [] }) => (
    <div className={`panel ${isMaximized ? 'maximized' : ''}`}>
        <div className="panel-header">
            <div className="panel-title">{title}</div>
            <div className="panel-controls">
                {actions.map((a, i) => (
                    <button key={i} className="panel-control-btn" onClick={a.onClick} title={a.title}>
                        <i className={a.icon}></i>
                    </button>
                ))}
                <button className="panel-control-btn" onClick={() => onToggleSize(id)} title={isMaximized ? 'Restore' : 'Maximize'}>
                    <i className={`fas ${isMaximized ? 'fa-compress' : 'fa-expand'}`}></i>
                </button>
                <button className="panel-control-btn" onClick={() => onClose(id)} title="Close">
                    <i className="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div className="panel-content">
            <div className="panel-content-scrollable">{children}</div>
        </div>
    </div>
);