export default function NodePalette({ definitions, componentTemplates, onAddNode, onAddComponentNode, onHide }) {
  return (
    <aside className="palette">
      <div className="palette__header">
        <div className="palette__topline">
          <div className="palette__eyebrow">React Flow</div>
          <button type="button" className="palette__hide-button" onClick={onHide}>
            Hide
          </button>
        </div>
        <h2 className="palette__title">Библиотека нод</h2>
        <p className="palette__subtitle">Добавляй ноды и собирай workflow в визуальном редакторе.</p>
      </div>

      <div className="palette__section">
        <div className="palette__section-title">Основные ноды</div>
        <div className="palette__list">
          {definitions.map((definition) => (
            <button
              key={definition.type}
              type="button"
              className="palette__item"
              onClick={() => onAddNode(definition.type)}
            >
              <span className="palette__item-title">{definition.title}</span>
              <span className="palette__item-description">{definition.description}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="palette__section">
        <div className="palette__section-title">Компоненты</div>

        {componentTemplates.length > 0 ? (
          <div className="palette__list">
            {componentTemplates.map((template) => (
              <button
                key={template.id}
                type="button"
                className="palette__item"
                onClick={() => onAddComponentNode(template.id)}
              >
                <span className="palette__item-title">{template.title}</span>
                <span className="palette__item-description">
                  {template.description?.trim() || 'Переиспользуемая компонентная нода'}
                </span>
              </button>
            ))}
          </div>
        ) : (
          <div className="palette__empty">Сохраненные компоненты появятся здесь.</div>
        )}
      </div>
    </aside>
  );
}