// topbar.jsx — верхняя панель (хлебные крошки + поиск + действия)

const Topbar = ({ crumbs = [], action, onAction, onOpenArticle }) => {
  const items = crumbs.map((c) => (typeof c === 'string' ? { label: c } : c));

  return (
    <header className="topbar">
      <div className="topbar-crumb">
        {items.map((c, i) => (
          <React.Fragment key={`${c.label}-${i}`}>
            {i > 0 && <span className="topbar-crumb-sep">/</span>}
            {c.current || !c.onClick ? (
              <span className={i === items.length - 1 ? 'topbar-crumb-last' : ''}>{c.label}</span>
            ) : (
              <button type="button" className="topbar-crumb-btn" onClick={c.onClick}>
                {c.label}
              </button>
            )}
          </React.Fragment>
        ))}
      </div>

      <TopbarSearch onOpenArticle={onOpenArticle} />

      <button className="topbar-icon-btn" title="Уведомления">
        <Icon name="bell" size={16} />
      </button>

      {action && (
        <button className="topbar-action" onClick={onAction}>
          <Icon name="plus" size={14} />
          {action}
        </button>
      )}
    </header>
  );
};

window.Topbar = Topbar;