/* global React */
(function () {
  const T = window.SC_T;
  const Icon = window.SC_Icon;

  function TopBar({ state, total, onExport, onNewRun }) {
    return (
      <div style={{
        height: 60, background: T.surface, borderBottom: `1px solid ${T.border}`,
        padding: '0 28px', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', flexShrink: 0,
        boxShadow: '0 1px 0 rgba(17,24,39,0.02)',
      }}>
        <StatusBadge state={state} count={total} />
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          {state === 'done' && (
            <>
              <GhostButton leftIcon={Icon.refresh(13)} onClick={onNewRun}>Новый сбор</GhostButton>
              <GhostButton leftIcon={Icon.download(14)} onClick={onExport}>Скачать Excel</GhostButton>
            </>
          )}
          {state === 'running' && (
            <GhostButton danger onClick={onNewRun}>Остановить</GhostButton>
          )}
          {state === 'error' && (
            <GhostButton onClick={onNewRun}>Попробовать снова</GhostButton>
          )}
        </div>
      </div>
    );
  }

  window.TopBar = TopBar;
})();