function ProgressSyncStatus({userId}) {
  const [state,setState]=React.useState(()=>window.ProgressSync.getStatus(userId));
  React.useEffect(()=>{
    setState(window.ProgressSync.getStatus(userId));
    const update=event=>{if(event.detail.userId===String(userId))setState(event.detail);};
    window.addEventListener('tb:progress-sync',update);
    return ()=>window.removeEventListener('tb:progress-sync',update);
  },[userId]);
  return <div role="status" style={{fontSize:13,lineHeight:1.6,margin:'12px 0',color:'#245c65'}}>{state.message}
    {['pending','error'].includes(state.state) && <button className="btn btn-secundario" style={{marginLeft:10}} onClick={()=>window.ProgressSync.flush()}>Reintentar</button>}
  </div>;
}