/* SyncDot → window. Usa useData. */
(function () {
  const { useData } = window;

  function SyncDot() {
    const { syncStatus } = useData();
    const map = {
      synced: { color: "#2563EB", label: "Sincronizado", spin: false },
      saving: { color: "#2563EB", label: "Guardando...", spin: true },
      offline: { color: "#9AA0A6", label: "Sin conexión", spin: false },
      error: { color: "#FF4B4B", label: "Error al guardar", spin: false },
    };
    const s = map[syncStatus] || map.synced;
    return (
      <span title={s.label} className="inline-flex items-center justify-center" style={{ width: 10, height: 10 }}>
        {s.spin ? (
          <svg width="10" height="10" viewBox="0 0 24 24" className="animate-spin">
            <circle cx="12" cy="12" r="10" stroke={s.color} strokeOpacity="0.25" strokeWidth="4" fill="none"/>
            <path d="M22 12a10 10 0 00-10-10" stroke={s.color} strokeWidth="4" fill="none" strokeLinecap="round"/>
          </svg>
        ) : (
          <span className="block rounded-full transition-colors duration-300"
                style={{ width: 8, height: 8, background: s.color }} />
        )}
      </span>
    );
  }

  window.SyncDot = SyncDot;
})();